:root{
    --red:#D72F2F;
    --red-dark:#AD2323;
    --red-deep:#7A1616;
    --ink:#201B1A;
    --ink-soft:#5B5352;
    --paper:#FFFFFF;
    --cream:#FAF7F4;
    --line:#E9E1DD;
    --ok:#2E7D4F;
    /* Shared semantic roles for controls and request status surfaces. */
    --color-bg-hover:#FAF8F5;
    --color-border-control:#897970;
    --color-border-control-hover:#655E58;
    --color-bg-muted:#F1EEEB;
    --color-text-muted:#655E58;
    --color-info-subtle:#EDF3FA;
    --color-info-text:#325F8C;
    --color-warning-subtle:#FFF2DC;
    --color-warning-text:#634B00;
    --color-success-subtle:#EAF4ED;
    --color-success-text:#347047;
    --color-danger-text:#A52B27;
    --color-overlay:#201D1B66;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--cream);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Inter',sans-serif;
    font-weight:800;
    letter-spacing:-.01em;
  }
  .topbar{
    background:var(--red);
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    position:sticky;
    top:0;
    z-index:10;
  }
  .logo-img{
    height:38px;
    width:auto;
    display:block;
    filter:brightness(0) invert(1);
  }
  .topbar-right{
    color:#fff;
    font-size:18px;
    font-weight:600;
    letter-spacing:.02em;
    white-space:nowrap;
  }
  .hero{
    background:var(--paper);
    color:var(--ink);
    padding:40px 24px 44px;
    text-align:center;
    border-bottom:1px solid var(--line);
  }
  .eyebrow{
    display:inline-block;
    color:var(--red);
    font-size:18px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:12px;
  }
  .hero h1{
    font-size:clamp(26px,4.6vw,38px);
    margin:0 0 12px;
    line-height:1.08;
    color:var(--ink);
  }
  .hero p{
    max-width:560px;
    margin:0 auto;
    font-size:18px;
    line-height:1.55;
    color:var(--ink-soft);
  }
  .wrap{
    max-width:640px;
    margin:-32px auto 60px;
    padding:0 16px;
  }
  .card{
    background:var(--paper);
    border-radius:16px;
    box-shadow:0 20px 40px -20px rgba(124,33,26,.25), 0 1px 0 var(--line);
    padding:32px 28px 28px;
  }
  .request-link-page .wrap{
    margin-top:64px;
  }
  .request-link-page .card{
    border:1px solid #d8c8c5;
  }
  /* stepper styled as asset tags */
  .stepper{
    display:flex;
    gap:6px;
    margin-bottom:28px;
  }
  .tag{
    flex:1;
    height:8px;
    border-radius:4px;
    background:var(--line);
    position:relative;
    transition:background .3s ease;
  }
  .tag.done{background:var(--red);}
  .tag.active{background:var(--red);}
  .step-label{
    font-size:18px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--ink-soft);
    font-weight:600;
    margin-bottom:4px;
  }
  .step-title{
    font-size:18px;
    margin:0 0 18px;
  }
  .field{margin-bottom:16px;}
  .field label{
    display:block;
    font-size:18px;
    font-weight:600;
    margin-bottom:6px;
    color:var(--ink);
  }
  /* Not scoped to .field: plenty of hints sit between fields rather than inside
     one, and without this they rendered at full body size in near-black, which
     made them read as instructions rather than as asides. */
  .hint{
    font-size:18px;
    color:var(--ink-soft);
    margin-top:5px;
    line-height:1.45;
  }
  .field input[type=text],
  .field input[type=email],
  .field input[type=number],
  .field input[type=tel],
  .field input[type=date],
  .field textarea,
  .field select{
    width:100%;
    padding:11px 12px;
    border:1.5px solid var(--line);
    border-radius:9px;
    font-family:'Inter',sans-serif;
    font-size:18px;
    color:var(--ink);
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .field input:focus,
  .field textarea:focus,
  .field select:focus{
    outline:none;
    border-color:var(--red);
    box-shadow:0 0 0 3px rgba(207,56,44,.15);
  }
  .field input.err, .field textarea.err, .field select.err{
    border-color:#C0392B;
  }
  .err-msg{
    font-size:18px;
    color:#C0392B;
    margin-top:5px;
    display:none;
  }
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}

  /* A radio group is a stack of large boxes, so it needs more room above and
     below than a text input does -- at 16px the next question crowds it. */
  .radio-field{border:none;padding:0;margin:0 0 24px;}
  .radio-field legend{
    display:block;
    font-size:18px;
    font-weight:600;
    margin-bottom:9px;
    padding:0;
    color:var(--ink);
  }
  /* Quantity and Starting Label Number sit directly under the size choices. */
  .spec-row{margin-top:8px;}
  @media(max-width:480px){.row2{grid-template-columns:1fr;}}

  .choice-group{display:flex;flex-direction:column;gap:8px;}
  .choice{
    border:1.5px solid var(--line);
    border-radius:10px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .choice:hover{border-color:#e5b7b1;}
  .choice.selected{
    border-color:var(--red);
    background:rgba(207,56,44,.06);
  }
  /* `.field label{display:block}` outranks `.choice` on specificity, so inside a
     field the choice boxes lost their flex layout -- and with it the gap, which
     left every radio jammed against its own label. */
  .field label.choice{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .choice input{margin:0;accent-color:var(--red);flex:none;}
  .choice .clabel{font-size:14.5px;font-weight:500;}

  /* A size the chosen artwork cannot go on. Shown, not hidden, so the reason
     is visible; the note sits on the right where the char counters do. */
  .choice.is-blocked{
    cursor:not-allowed;
    opacity:.55;
    background:var(--cream);
  }
  .choice.is-blocked:hover{border-color:var(--line);}
  .choice-note{
    margin-left:auto;
    font-size:18px;
    color:var(--ink-soft);
    text-align:right;
  }

  /* The landing page's two links wear the same shape as a form choice, so the
     page reads as one decision rather than as navigation. */
  a.choice.pick{
    text-decoration:none;
    color:var(--ink);
    justify-content:space-between;
  }
  a.choice.pick:hover{border-color:var(--red);background:rgba(207,56,44,.04);}
  a.choice.pick .clabel{font-weight:600;}
  a.choice.pick::after{content:"\2192";color:var(--red);font-weight:700;}

  .yn{display:flex;gap:10px;}
  .yn .choice{flex:1;justify-content:center;}

  .fileinput{
    border:1.5px dashed var(--line);
    border-radius:10px;
    padding:20px;
    text-align:center;
    cursor:pointer;
    color:var(--ink-soft);
    font-size:18px;
  }
  .fileinput.has-file{border-color:var(--ok);color:var(--ok);border-style:solid;}
  .fileinput input{display:none;}

  .textlines{display:flex;flex-direction:column;gap:8px;}
  .textline-row{display:flex;align-items:center;gap:10px;}
  .textline-row input{flex:1;}
  .char-count{
    flex-shrink:0;
    width:38px;
    text-align:right;
    font-size:18px;
    color:var(--ink-soft);
  }

  .sigpad-wrap{
    border:1.5px solid var(--line);
    border-radius:9px;
    overflow:hidden;
    line-height:0;
  }
  .sigpad{
    width:100%;
    height:160px;
    display:block;
    background:#fff;
  }
  /* Two ways to sign, side by side. */
  .sig-modes{display:flex;gap:8px;margin-bottom:10px;}
  .sig-modes .choice{flex:1;justify-content:center;}
  .sigpad.err{border-color:#C0392B;}
  .sigpad-clear{padding:6px 0;font-size:12.5px;margin-top:6px;}
  .sig-print{max-height:60px;max-width:220px;}

  .contact-card{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--line);
    font-size:18px;
    color:var(--ink-soft);
    text-align:center;
  }
  .contact-card a{color:var(--red);text-decoration:none;}
  .contact-card a:hover{text-decoration:underline;}
  .contact-lines{margin-top:10px;line-height:1.7;}

  .actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:24px;
    gap:10px;
  }
  button{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:18px;
    border:none;
    border-radius:9px;
    padding:12px 22px;
    cursor:pointer;
    transition:background .15s ease, opacity .15s ease, transform .1s ease;
  }
  button.primary{background:var(--red);color:#fff;}
  button.primary:hover{background:var(--red-dark);}
  @media (prefers-reduced-motion: no-preference) {
    button.primary { transition: background-color 150ms ease-out, transform 150ms ease-out; }
    button.primary:not(:disabled):active { transform:scale(.96); }
  }
  /* Reusable secondary action; use a native link when it navigates. */
  .secondary {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:42px; padding:10px 16px; border:1px solid var(--color-border-control);
    border-radius:8px; background:var(--paper); color:var(--ink);
    font:inherit; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer;
  }
  @media (hover: hover) {
    .secondary:hover:not(:disabled) { background:var(--color-bg-hover); border-color:var(--color-border-control-hover); }
  }
  .secondary:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
  button.ghost{background:transparent;color:var(--ink-soft);}
  button.ghost:hover{color:var(--ink);}
  button:disabled{opacity:.5;cursor:not-allowed;}

  .review-block{margin-bottom:18px;}
  .review-block h3{
    font-size:18px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--red-deep);
    margin:0 0 10px;
    font-family:'Inter',sans-serif;
    font-weight:700;
  }
  .review-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border-bottom:1px solid var(--line);
    font-size:18px;
  }
  .review-row:last-child{border-bottom:none;}
  .review-row .k{color:var(--ink-soft);}
  .review-row .v{font-weight:600;text-align:right;max-width:60%;word-break:break-word;}

  .authtext{
    background:var(--cream);
    border-radius:10px;
    padding:16px;
    font-size:18px;
    line-height:1.6;
    color:var(--ink-soft);
    margin-bottom:18px;
  }
  .agree{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-bottom:18px;
    font-size:18px;
  }
  .agree input{margin-top:3px;accent-color:var(--red);}

  .success{
    text-align:center;
    padding:20px 4px 4px;
  }
  .success .check{
    width:56px;height:56px;
    border-radius:50%;
    background:rgba(46,125,79,.12);
    color:var(--ok);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 16px;
  }
  .success .ref{
    font-family:'Inter',sans-serif;
    font-weight:800;
    font-size:18px;
    letter-spacing:.03em;
    color:var(--red-deep);
    margin:12px 0 4px;
  }

  .foot{
    text-align:center;
    margin-top:22px;
  }
  .foot a{
    font-size:18px;
    color:var(--ink-soft);
    text-decoration:underline;
    cursor:pointer;
  }
  .foot a:hover{color:var(--red);}

/* ---------------------------------------------------------------------------
   Accessibility
   The label choices are keyboard-operable, so they need a visible focus ring.
   --------------------------------------------------------------------------- */
.choice:focus-visible{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(207,56,44,.25);
}
button:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Submission failures are announced inline rather than through alert(). */
.form-error{
  background:#FCEDEC;
  border:1.5px solid #E4B4AF;
  color:#8C2A22;
  border-radius:10px;
  padding:12px 14px;
  font-size:13.5px;
  line-height:1.5;
  margin-bottom:16px;
}

.seq-preview{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:5px;
  line-height:1.4;
}
.seq-preview strong{color:var(--ink);font-weight:600;}

/* ---------------------------------------------------------------------------
   Printed authorization record
   A custom label order is nonreturnable once approved, so the customer needs a
   durable copy of exactly what they authorized. Printing the confirmation
   screen produces that record.
   --------------------------------------------------------------------------- */
.print-only{display:none;}

@media print{
  /* Zero margin, and the page's own padding instead.
   *
   * Chromium draws its date / document-title header and its URL / page-number
   * footer inside the @page margin. With no margin there is nowhere to draw
   * them, so they do not appear -- which is the only way CSS can remove them.
   * The print dialog's "Headers and footers" checkbox remains the belt to this
   * brace. The document supplies its own 11mm inset below so nothing lands in
   * a printer's unprintable edge. */
  @page{size:letter;margin:0;}
  body{background:#fff;}
  .topbar,.hero,.stepper,.actions,.foot,.no-print{display:none !important;}
  .print-only{display:block;}
  .wrap{margin:0;padding:0;max-width:none;}
  .card{
    box-shadow:none;
    border-radius:0;
    padding:0;
  }
  .success .check{display:none;}
  .review-row{break-inside:avoid;}
  .print-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:2px solid var(--red);
    padding-bottom:10px;
    margin-bottom:18px;
  }
  .print-header img{height:34px;width:auto;}
  .print-header .meta{font-size:12px;text-align:right;color:var(--ink-soft);}
  .authtext{
    background:none;
    border:1px solid var(--line);
    padding:12px;
  }
}

/* ---------------------------------------------------------------------------
   Signature
   Typed names render to the canvas, so in that mode the canvas is
   display-only; in draw mode it becomes the input and has to swallow touch
   gestures so a stroke does not scroll the page.
   --------------------------------------------------------------------------- */
.field #sigTyped{
  font-family:'Dancing Script','Segoe Script',cursive;
  font-size:22px;
  letter-spacing:.01em;
}
.sigpad{
  cursor:default;
  touch-action:auto;
}
.sigpad.draw{
  cursor:crosshair;
  touch-action:none;
}

/* ---------------------------------------------------------------------------
   The label order document
   Its own visual world, and deliberately so: everything else here is a web
   form, this is a printed business document that goes to a supplier. Hence a
   sans face throughout, hairline rules, boxed field labels and fixed black on
   white regardless of anything else on the page.

   The same markup serves the customer's printed copy and the dashboard's
   read-back, so the styles live here rather than in either caller's stylesheet.
   --------------------------------------------------------------------------- */
.order-doc{
  background:#fff;
  color:#201B1A;
  font-family:'Archivo',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* Every size inside is an em of this, so the whole sheet scales from one
     number. Print sets its own, larger, below. */
  font-size:13.5px;
  line-height:1.45;
  padding:26px 30px 22px;
}
.order-doc .od-lab{
  font-size:.68em;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8C8280;
}
.order-doc .od-blk{display:block;margin-bottom:4px;}
.order-doc .od-m{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-variant-numeric:tabular-nums;}
.order-doc .od-b{font-weight:600;}
.order-doc .od-right{text-align:right;}
.order-doc .od-narrow{width:26px;}

/* masthead */
.order-doc .od-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  border-bottom:2.5px solid var(--red);
  padding-bottom:12px;
}
.order-doc .od-brand img{height:56px;width:auto;display:block;}
.order-doc .od-title{text-align:right;}
.order-doc .od-dt{
  font-weight:700;
  font-size:1.52em;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1;
}
.order-doc .od-drow{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:5px;
  font-size:.88em;
}
.order-doc .od-dv{font-family:ui-monospace,Menlo,monospace;font-weight:600;}

/* parties: ordered by, supplier, ship to */
.order-doc .od-parties{
  display:grid;
  grid-template-columns:.9fr .9fr 1.3fr;
  margin-top:15px;
  border:1px solid #C8BFBB;
}
.order-doc .od-party{padding:9px 11px;border-right:1px solid #D9D3D0;}
.order-doc .od-party:last-child{border-right:none;}
/* The one panel a reader must not skim past: where the labels physically go.
   Deeper than the old #FBEDEC, which was so pale it read as a printing
   artefact rather than a highlight. */
.order-doc .od-shipto{background:#FADEDB;border-left:2.5px solid var(--red);}
.order-doc .od-shipto .od-lab{color:var(--red-dark);}
.order-doc .od-nm{font-weight:700;}
.order-doc .od-ln{color:#3D3634;}
.order-doc .od-att{margin-top:6px;padding-top:5px;border-top:1px dotted #C8BFBB;}
.order-doc .od-att-flush{margin-top:5px;padding-top:0;border-top:none;}

/* reference strip */
.order-doc .od-refs{
  display:grid;
  grid-template-columns:1fr;
  border:1px solid #C8BFBB;
  border-top:none;
}
.order-doc .od-ref{padding:7px 11px;border-right:1px solid #D9D3D0;}
.order-doc .od-ref:last-child{border-right:none;}
.order-doc .od-rv{
  font-family:ui-monospace,Menlo,monospace;
  font-weight:600;
  font-size:.96em;
}

/* section bars and tables */
.order-doc .od-sec{
  font-weight:700;
  font-size:.8em;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--ink);
  color:#fff;
  padding:4px 11px;
  margin-top:15px;
}
.order-doc .od-tbl{
  width:100%;
  border-collapse:collapse;
  border:1px solid #C8BFBB;
  border-top:none;
}
.order-doc .od-tbl th{
  font-size:.68em;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5B5352;
  text-align:left;
  padding:6px 9px;
  background:#F4F1EF;
  border-bottom:1px solid #C8BFBB;
  border-right:1px solid #E4DEDB;
  white-space:nowrap;
}
.order-doc .od-tbl td{
  padding:8px 9px;
  border-bottom:1px solid #EAE5E2;
  border-right:1px solid #EAE5E2;
  vertical-align:top;
  font-size:.92em;
}
/* Figures are short and read as one unit -- a die size broken across two
   lines is a spec somebody has to reassemble by eye. */
.order-doc .od-tbl .od-m{white-space:nowrap;}
.order-doc .od-tbl th:last-child,
.order-doc .od-tbl td:last-child{border-right:none;}
.order-doc .od-tbl tbody tr:last-child td{border-bottom:none;}

/* artwork and handling, side by side */
.order-doc .od-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid #C8BFBB;
  border-top:none;
}
/* The vendor copy has no proof-and-invoice panel, so artwork takes the row
   rather than leaving half of it blank. */
.order-doc .od-two-one{grid-template-columns:1fr;}
.order-doc .od-two > div{padding:9px 11px;border-right:1px solid #D9D3D0;}
.order-doc .od-two > div:last-child{border-right:none;}
/* Fixed label column so a long label wraps instead of shoving every value
   across and breaking alignment with the panel beside it. */
.order-doc .od-kv{
  display:grid;
  /* In em, not px: at a fixed 92px the labels wrapped to three lines as soon
     as the print size went up. */
  grid-template-columns:7.4em 1fr;
  gap:4px 12px;
  align-items:start;
}
.order-doc .od-kv .od-lab{padding-top:2px;line-height:1.3;}
.order-doc .od-kv .od-v{font-weight:600;}
.order-doc .od-block{
  border:1px solid #C8BFBB;
  border-top:none;
  padding:9px 11px;
}

/* authorisation */
.order-doc .od-auth{border:1px solid #C8BFBB;border-top:none;padding:10px 11px;}
.order-doc .od-authtext{
  font-size:.8em;
  line-height:1.5;
  color:#3D3634;
  background:#F4F1EF;
  border:1px solid #E4DEDB;
  padding:8px 10px;
}
.order-doc .od-siggrid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  margin-top:10px;
  border:1px solid #C8BFBB;
}
.order-doc .od-sig{
  padding:8px 10px;
  border-right:1px solid #D9D3D0;
  min-height:62px;
}
.order-doc .od-sig:last-child{border-right:none;}
.order-doc .od-sigimg{
  display:block;
  max-height:40px;
  max-width:100%;
  width:auto;
  margin-top:4px;
}
.order-doc .od-sigval{display:block;font-weight:600;font-size:1.04em;padding-top:10px;}

.order-doc .od-foot{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:13px;
  padding-top:9px;
  border-top:1px solid #D9D3D0;
  font-size:.76em;
  color:#8C8280;
}

@media (max-width:640px){
  .order-doc{padding:18px 14px;}
  .order-doc .od-parties,
  .order-doc .od-refs,
  .order-doc .od-two,
  .order-doc .od-siggrid{grid-template-columns:1fr;}
  .order-doc .od-party,
  .order-doc .od-ref,
  .order-doc .od-two > div,
  .order-doc .od-sig{border-right:none;border-bottom:1px solid #D9D3D0;}
  .order-doc .od-kv{grid-template-columns:1fr;gap:1px 0;}
}

@media print{
  /* The document is the page when printing: no shell padding, no page breaks
     inside a block that a supplier reads as one thing.
   *
   * The paddings below are trimmed from their screen values. On screen the
   * document breathes inside a scrolling card; on paper it has a fixed height
   * to live in, and the version that filled 924px of a 935px page box left no
   * room for a wrapped address line. Trimming the rhythm rather than the type
   * keeps it legible: shrinking the type is what made the printed copy
   * unreadable in the first place, because the browser then also scaled it to
   * fit two pages' worth of content. */
  /* 18px, from 13.5 on screen, and 18 is the ceiling rather than a taste
     call: at 18.5 the fullest real order (NWT, six lines of serial blocks in
     its instructions) tips onto a second page. Every size inside the document
     is an em of this one, so this is the only number to change -- but check
     that order still fits on one page before raising it. */
  .order-doc{
    padding:11mm;
    font-size:18px;
    width:100%;
    max-width:none;
  }
  .order-doc .od-brand img{height:62px;}
  .order-doc .od-head{padding-bottom:9px;}
  .order-doc .od-parties{margin-top:11px;}
  .order-doc .od-party{padding:7px 10px;}
  .order-doc .od-ref{padding:5px 10px;}
  .order-doc .od-sec{margin-top:11px;padding:3px 10px;}
  .order-doc .od-tbl th{padding:4px 8px;}
  .order-doc .od-tbl td{padding:6px 8px;}
  .order-doc .od-two > div,
  .order-doc .od-block{padding:7px 10px;}
  .order-doc .od-auth{padding:8px 10px;}
  .order-doc .od-authtext{padding:6px 9px;}
  .order-doc .od-siggrid{margin-top:8px;}
  .order-doc .od-sig{padding:6px 10px;min-height:54px;}
  .order-doc .od-foot{margin-top:10px;padding-top:7px;}
  .order-doc .od-parties,
  .order-doc .od-refs,
  .order-doc .od-tbl,
  .order-doc .od-two,
  .order-doc .od-block,
  .order-doc .od-auth{break-inside:avoid;}
  .order-doc .od-sec{
    /* Backgrounds are dropped by default in print, so the section bars need
       the colour forced or they read as unstyled text. */
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .order-doc .od-shipto,
  .order-doc .od-tbl th,
  .order-doc .od-authtext{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

.request-link-page h1 { font-size:30px; line-height:1.2; margin:12px 0 16px; }
.request-link-page .card > p { line-height:1.6; color:var(--ink-soft); }
.request-link-page .contact-card { text-align:start; border:0; padding:0; margin:28px 0; }
.request-link-page .contact-card a { text-decoration:underline; text-underline-offset:3px; }
.request-link-page .request-link-help { font-size:14px; margin-bottom:0; }
@media (max-width: 480px) {
 .request-link-page .wrap { margin-top:32px; }
 .request-link-page .card { padding:24px; }
 .request-link-page h1 { font-size:26px; }
}

/* Customer artwork preview, shared by upload and review steps. */
.artwork-preview{margin:16px 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;}
.artwork-preview img{display:block;width:100%;max-width:400px;height:200px;object-fit:contain;padding:16px;box-sizing:border-box;background:var(--paper,#fff);border:1px solid var(--line,#E9E1DD);border-radius:8px;}
.artwork-preview figcaption{font-size:13px;color:var(--ink-soft);overflow-wrap:anywhere;max-width:100%;}
.artwork-preview a{font-size:14px;text-decoration:underline;}