/* ============================================================================
   Kits4Less — content / info pages
   Quality Control, Verify, Order Status, Dosage Calculator, How to Buy Bitcoin,
   FAQs, Contact Us, Privacy Policy, Terms of Service.

   Uses the tokens declared in k4l-tokens.css. Matches the source's Bricks
   layout: 1290px container, purple headings, lime/purple accents, Clash Display
   headings + Public Sans body.
   ========================================================================== */

/* --- shared page shell --------------------------------------------------- */
/* Two rendered scales measured off the source:
   - "form" pages (verify / order-status / contact) — 40px purple H1, 64px band.
   - "hero" pages (faqs / dosage / quality-control / how-to-buy / legal) —
     100px H1, 112px band. Hero H1 is deep-purple on the guides, pale-lavender
     (#D4CBFB) on faqs / dosage / QC. */
.k4l-page {
  padding-block: clamp(40px, 5vw, 64px);   /* source form pages: 64px band */
}
.k4l-page--hero {
  padding-block: clamp(56px, 8vw, 112px);  /* source hero pages: 112px band */
}
.k4l-pagewrap--grey { background: var(--k4l-grey-bg); }

.k4l-page__head {
  margin-bottom: 40px;
}
.k4l-page__title {
  font-size: var(--k4l-fs-h2);
  color: var(--k4l-purple);
  margin: 0 0 .35em;
}
.k4l-page__title--hero {
  font-size: clamp(2.75rem, 8vw, 6.25rem);  /* 100px @ 1440 */
  line-height: 1.15;
  margin: 0 0 .4em;
}
.k4l-page__title--lav { color: var(--k4l-purple-pale); }  /* faqs / dosage / QC */

.k4l-page__lead {
  font-size: var(--k4l-fs-lg);       /* 20px */
  font-weight: 300;                  /* source lead is light */
  color: var(--k4l-ink);
  max-width: 70ch;
  margin: 0;
}

/* Long-form prose (legal, bitcoin guide).
   Source scale: h2/h3 = 32px purple, h4 = 18px purple, step labels (<pre>) =
   16px purple, all Clash Display 600; body copy 16px, Public Sans, weight 300,
   full-ink. */
.k4l-prose {
  max-width: 820px;
  font-weight: 300;
}
.k4l-prose h2 {
  font-size: var(--k4l-fs-h4);       /* ~32px */
  color: var(--k4l-purple);
  margin: 1.4em 0 .5em;
}
.k4l-prose h3 {
  font-size: var(--k4l-fs-h4);       /* source keeps h2/h3 at the same 32px */
  color: var(--k4l-purple);
  margin: 1.3em 0 .5em;
}
.k4l-prose h4 {
  font-size: 1.125rem;               /* 18px */
  color: var(--k4l-purple);
  margin: 1.3em 0 .4em;
}
.k4l-prose p { color: var(--k4l-ink); font-weight: 300; }
.k4l-prose ul,
.k4l-prose ol { color: var(--k4l-ink); font-weight: 300; padding-left: 1.35em; margin: 0 0 1.2em; }
.k4l-prose li { margin-bottom: .5em; }
.k4l-prose strong { color: var(--k4l-ink); font-weight: 600; }
.k4l-prose pre {
  font-family: var(--k4l-font-display);
  font-size: 1rem;                   /* 16px step labels */
  font-weight: 600;
  color: var(--k4l-purple);
  background: none;
  white-space: normal;
  margin: 1.4em 0 .4em;
}
.k4l-prose__meta {
  display: inline-block;
  font-size: 1rem;
  font-weight: 300;
  color: rgba(14, 8, 22, .45);       /* source meta tint */
  margin-bottom: 1.6em;
}

/* Prose + sticky table-of-contents (how-to-buy, legal) — source's 2-col band */
.k4l-prose-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}
.k4l-prose-layout .k4l-prose { max-width: none; }
@media (max-width: 900px) {
  .k4l-prose-layout { grid-template-columns: 1fr; gap: 24px; }
}
.k4l-toc {
  position: sticky;
  top: calc(var(--k4l-header-h) + 16px);
  background: var(--k4l-white);
  border: 1px solid var(--k4l-border);
  border-radius: 8px;
  padding: 16px 18px;
}
.k4l-toc__title {
  font-family: var(--k4l-font-display);
  font-weight: 600;
  font-size: var(--k4l-fs-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--k4l-purple);
  margin: 0 0 10px;
}
.k4l-toc ul { list-style: none; margin: 0; padding: 0; }
.k4l-toc li { margin: 0; }
.k4l-toc a {
  display: block;
  padding: 4px 0;
  font-size: var(--k4l-fs-md);
  color: var(--k4l-ink-80);
  line-height: 1.35;
}
.k4l-toc a:hover,
.k4l-toc a.is-active { color: var(--k4l-purple); font-weight: 600; }
@media (max-width: 900px) {
  .k4l-toc { position: static; margin-bottom: 8px; }
}
.k4l-prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--k4l-radius-lg);
  margin: 1em 0 1.5em;
}

/* --- forms --------------------------------------------------------------- */
.k4l-field { margin-bottom: 20px; }
.k4l-field__label {
  display: block;
  font-family: var(--k4l-font-display);
  font-weight: 600;
  font-size: var(--k4l-fs-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--k4l-ink);
  margin-bottom: 8px;
}
.k4l-input,
.k4l-textarea,
.k4l-select {
  width: 100%;
  font-family: var(--k4l-font-body);
  font-size: var(--k4l-fs-md);
  color: var(--k4l-ink);
  background: var(--k4l-white);
  border: 1px solid var(--k4l-border);
  border-radius: var(--k4l-radius);
  padding: 12px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.k4l-input:focus,
.k4l-textarea:focus,
.k4l-select:focus {
  outline: none;
  border-color: var(--k4l-purple-mid);
  box-shadow: 0 0 0 3px rgba(112, 82, 242, .15);
}
.k4l-textarea { min-height: 150px; resize: vertical; }
.k4l-field__hint { font-size: var(--k4l-fs-xs); color: var(--k4l-grey-2); margin-top: 6px; }

.k4l-formcard {
  background: var(--k4l-white);
  border: 1px solid var(--k4l-border);
  border-radius: var(--k4l-radius-lg);
  box-shadow: var(--k4l-shadow);
  padding: clamp(24px, 4vw, 40px);
}

.k4l-notice {
  border-radius: var(--k4l-radius);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: var(--k4l-fs-md);
}
.k4l-notice--ok    { background: rgba(3, 161, 108, .1);  color: var(--k4l-green); border: 1px solid rgba(3,161,108,.3); }
.k4l-notice--err   { background: rgba(223, 33, 33, .08); color: var(--k4l-red);   border: 1px solid rgba(223,33,33,.3); }

/* --- contact-us layout --------------------------------------------------- */
/* Source: grey section band, two equal columns. Left = white card (radius 8px)
   holding the heading + lead + form. Right = stack of white help cards
   (radius 4px, 16px pad) each with a title, an arrow, and a description. */
.k4l-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.k4l-contact__form.k4l-formcard { padding: clamp(24px, 3vw, 32px); }
.k4l-contact__head { margin-bottom: 24px; }
.k4l-contact__head .k4l-page__title { font-size: var(--k4l-fs-h2); }

.k4l-contact__cards { display: grid; gap: 16px; }
.k4l-contact__card {
  display: block;
  background: var(--k4l-white);
  border: 1px solid var(--k4l-border);
  border-radius: 4px;
  padding: 16px 20px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.k4l-contact__card:hover { transform: translateY(-2px); box-shadow: var(--k4l-shadow); }
.k4l-contact__cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.k4l-contact__card h3 {
  font-size: var(--k4l-fs-lg);   /* ~h5 in source */
  color: var(--k4l-purple);
  margin: 0;
}
.k4l-contact__arrow { flex: none; width: 24px; height: 24px; color: var(--k4l-purple); }
.k4l-contact__card p  { margin: .5em 0 0; color: var(--k4l-ink-60); font-size: var(--k4l-fs-md); }
@media (max-width: 860px) { .k4l-contact { grid-template-columns: 1fr; } }

/* --- verify -------------------------------------------------------------- */
/* Source: two columns — left holds the heading, lead, "Unique code" label and
   the code field; right holds a large product photo. */
.k4l-verify-layout {
  display: grid;
  grid-template-columns: minmax(0, 590px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.k4l-verify { max-width: 590px; }
.k4l-verify .k4l-page__head { margin-bottom: 28px; }
/* Source styles the field caption as a purple Clash-Display sub-head, not the
   uppercase micro-label used on the other forms. */
.k4l-verify .k4l-field__label {
  font-size: var(--k4l-fs-base);   /* 16px */
  color: var(--k4l-purple);
  text-transform: none;
  letter-spacing: 0;
}
.k4l-verify__row { display: flex; gap: 12px; align-items: stretch; }
.k4l-verify__row .k4l-input { flex: 1; }
.k4l-verify__result { margin-top: 22px; }
.k4l-verify__media { margin: 0; }
.k4l-verify__media img { width: 100%; height: auto; border-radius: 8px; display: block; }
@media (max-width: 860px) {
  .k4l-verify-layout { grid-template-columns: 1fr; }
  .k4l-verify__media { order: -1; }   /* photo above the form on mobile */
}
@media (max-width: 520px) {
  .k4l-verify__row { flex-direction: column; }
}

/* --- order status -------------------------------------------------------- */
.k4l-track { max-width: 620px; }
.k4l-track .track_order p { margin-bottom: 18px; }
.k4l-track label { display: block; font-family: var(--k4l-font-display); font-weight: 600;
  font-size: var(--k4l-fs-sm); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.k4l-track input[type="text"] {
  width: 100%; font-size: var(--k4l-fs-md); color: var(--k4l-ink);
  border: 1px solid var(--k4l-border); border-radius: var(--k4l-radius); padding: 12px 14px;
}
.k4l-track button { margin-top: 6px; }

/* --- dosage calculator --------------------------------------------------- */
/* Source: two equal white cards (radius 8px, 24px pad) side by side. Left card
   holds the input form and the result read-out; right card holds the HCG
   Dilution Table. */
.k4l-calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 2.5vw, 32px);
  align-items: start;
}
@media (max-width: 900px) { .k4l-calc { grid-template-columns: 1fr; } }

.k4l-calc__card {
  background: var(--k4l-white);
  border: 1px solid var(--k4l-border);
  border-radius: 8px;
  box-shadow: var(--k4l-shadow);
  padding: clamp(20px, 2vw, 24px);
}
.k4l-calc__form { margin: 0; }

/* Result read-out — lives inside the left card, below the inputs. */
.k4l-calc__result {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--k4l-border);
}
.k4l-calc__result h3 { color: var(--k4l-purple); font-size: var(--k4l-fs-lg); margin: 0 0 .5em; }
.k4l-calc__out {
  font-size: var(--k4l-fs-md);
  line-height: 1.5;
  min-height: 2.5em;
  color: var(--k4l-ink);
}
.k4l-calc__out .big {
  display: block;
  font-family: var(--k4l-font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--k4l-purple);
  line-height: 1.05;
  margin: .1em 0;
}
.k4l-calc__out .muted { color: var(--k4l-ink-60); font-size: var(--k4l-fs-md); }
.k4l-calc__err { color: var(--k4l-red); font-weight: 600; }

/* syringe visual (light card variant) */
.k4l-syringe { margin-top: 22px; }
.k4l-syringe__barrel {
  position: relative;
  height: 28px;
  border: 2px solid var(--k4l-border);
  border-radius: 6px;
  background: var(--k4l-grey-bg);
  overflow: hidden;
}
.k4l-syringe__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: var(--k4l-purple-mid);
  transition: width .35s ease;
}
.k4l-syringe__scale {
  display: flex; justify-content: space-between;
  font-size: var(--k4l-fs-xs); color: var(--k4l-grey-2);
  margin-top: 6px;
}

.k4l-calc__customwrap { display: none; margin-top: 8px; }
.k4l-calc__customwrap.is-visible { display: block; }

/* HCG table — right card */
.k4l-hcg { margin: 0; }
.k4l-hcg h2 { font-size: var(--k4l-fs-lg); color: var(--k4l-purple); margin-bottom: 16px; }
.k4l-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.k4l-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: var(--k4l-fs-sm);
}
.k4l-table th,
.k4l-table td {
  border: 1px solid var(--k4l-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.k4l-table thead th {
  background: var(--k4l-purple);
  color: var(--k4l-white);
  font-family: var(--k4l-font-display);
  font-weight: 600;
  font-size: var(--k4l-fs-xs);
}
.k4l-table tbody tr:nth-child(even) { background: var(--k4l-grey-bg); }

/* --- quality control (tabbed lab-report gallery) ------------------------- */
/* Source: a white tab-menu card (radius 8px, 16px pad) with rounded tab rows
   (radius 4px, 12px pad) beside a white content card (radius 8px, 32px pad),
   24px gutter. */
.k4l-qc__layout {
  display: grid;
  grid-template-columns: 325px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .k4l-qc__layout { grid-template-columns: 1fr; } }

.k4l-qc__tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--k4l-border);
  border-radius: 8px;
  background: var(--k4l-white);
  padding: 16px;
  position: sticky;
  top: calc(var(--k4l-header-h) + 16px);
  max-height: calc(100vh - var(--k4l-header-h) - 32px);
  overflow-y: auto;
}
@media (max-width: 900px) {
  .k4l-qc__tabs { position: static; max-height: 320px; flex-direction: row; flex-wrap: wrap;
    gap: 8px; padding: 12px; }
}
.k4l-qc__tab {
  appearance: none;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--k4l-font-body);
  font-size: var(--k4l-fs-md);
  color: var(--k4l-ink-80);
  padding: 12px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.k4l-qc__tab:hover { background: var(--k4l-purple-wash); color: var(--k4l-purple); }
.k4l-qc__tab.is-active {
  background: var(--k4l-purple);
  color: var(--k4l-white);
  font-weight: 600;
}
@media (max-width: 900px) {
  .k4l-qc__tab { border: 1px solid var(--k4l-border); border-radius: 999px; padding: 8px 14px;
    font-size: var(--k4l-fs-sm); }
}

.k4l-qc__panes {
  background: var(--k4l-white);
  border: 1px solid var(--k4l-border);
  border-radius: 8px;
  padding: clamp(20px, 3vw, 32px);
}
.k4l-qc__pane { display: none; }
.k4l-qc__pane.is-active { display: block; }
.k4l-qc__panetitle { font-size: var(--k4l-fs-h4); color: var(--k4l-purple); margin-bottom: 20px; }

.k4l-qc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.k4l-qc__label {
  grid-column: 1 / -1;
  font-family: var(--k4l-font-display);
  font-weight: 600;
  font-size: var(--k4l-fs-lg);
  color: var(--k4l-ink);
  margin: 14px 0 2px;
}
.k4l-qc__fig {
  margin: 0;
  border: 1px solid var(--k4l-border);
  border-radius: var(--k4l-radius-lg);
  overflow: hidden;
  background: var(--k4l-white);
  box-shadow: var(--k4l-shadow);
}
.k4l-qc__fig a { display: block; }
.k4l-qc__fig img { width: 100%; height: auto; display: block; background: var(--k4l-grey-bg); }
.k4l-qc__empty { color: var(--k4l-grey-2); font-style: italic; }

/* --- generic help links row --------------------------------------------- */
.k4l-helprow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 40px;
}