/* ============================================================
   Custom Font Request — form styled to the Proofokei system
   (sticky-note pastels, black borders, pill shapes, NaN Rage)
   All classes are prefixed .cf- to avoid collisions.
   ============================================================ */
:root {
  --cf-paper: #FFFBCC;
  --cf-paper-2: #FFFEF2;
  --cf-white: #FFFFFF;
  --cf-ink: #000000;
  --cf-ink-soft: #4a463a;
  --cf-ink-faint: #8a8472;
  --cf-line: #000000;
  --cf-line-soft: rgba(0, 0, 0, 0.16);
  --cf-blue: #CDEBFF;
  --cf-blue-tint: rgba(205, 235, 255, 0.55);
  --cf-pink: #FFD9F7;
  --cf-pink-tint: rgba(255, 217, 247, 0.5);
  --cf-orange: #FFB56B;
  --cf-green: #D4F7DC;
  --cf-card: #16130F;
  --cf-card-2: #211D16;
  --cf-card-line: #3A352B;
  --cf-on-card: #FFFBCC;
  --cf-on-card-soft: #C8BFa6;
  --cf-on-card-faint: #8b8472;
  --cf-r: 16px;
  --cf-r-s: 11px;
  --cf-font: 'NaN Rage Soft VF', -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", sans-serif;
}

/* ---------- Trigger button (top-right, matches dynamic island) ---------- */
.cf-trigger {
  position: fixed;
  top: 12px;
  right: 24px;
  z-index: 51;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  font-family: 'NaN Rage Soft VF', var(--default-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #000;
  text-decoration: none;
  background: var(--cf-paper);
  border: 1px solid #000;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s, background 0.3s;
}
.cf-trigger:hover {
  background: var(--yellow-note-dark, #F5F1A8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
.cf-trigger:active { transform: translateY(0); }
.cf-trigger:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 251, 204, 0.6);
}
.cf-trigger-icon { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 600px) {
  .cf-trigger { right: 10px; padding: 0 10px; gap: 0; }
  .cf-trigger .cf-trigger-label { display: none; }
  .cf-trigger-icon { width: 18px; height: 18px; }
}

/* ---------- Standalone page layout ---------- */
.cf-page-body,
.cf-page-body *,
.cf-page-body *::before,
.cf-page-body *::after {
  box-sizing: border-box;
}
.cf-page-body {
  margin: 0;
  background: var(--cf-paper);
  font-family: var(--cf-font);
  color: var(--cf-ink);
  line-height: 1.5;
  min-height: 100vh;
}
.cf-page-body input,
.cf-page-body textarea {
  cursor: text !important;
}

.cf-page-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 48px);
  background: var(--cf-paper);
  border-bottom: 1px solid #000;
}

.cf-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  font-family: var(--cf-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #000;
  text-decoration: none;
  background: var(--cf-white);
  border: 1px solid #000;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: background 0.15s, transform 0.15s;
}
.cf-back:hover {
  background: var(--cf-blue);
  transform: translateY(-1px);
}

.cf-page { padding-bottom: 48px; }

.cf-sheet {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--cf-paper);
  padding: clamp(20px, 4vw, 52px);
  font-family: var(--cf-font);
  color: var(--cf-ink);
  line-height: 1.5;
}

/* ---------- Header ---------- */
.cf-header { margin-bottom: clamp(22px, 3vw, 40px); max-width: 56ch; }
.cf-header-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cf-header-top .cf-kicker { margin-bottom: 0; }
.cf-langtoggle {
  display: inline-flex;
  border: 1px solid #000;
  border-radius: 999px;
  overflow: hidden;
  background: var(--cf-white);
}
.cf-lang-btn {
  font-family: var(--cf-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 13px;
  border: none;
  background: none;
  color: #000;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cf-lang-btn + .cf-lang-btn { border-left: 1px solid #000; }
.cf-lang-btn:hover { background: var(--cf-blue); }
.cf-lang-active { background: var(--cf-orange); color: #000; }
.cf-lang-active:hover { background: #FFC285; color: #000; }
.cf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}
.cf-kicker::before { content: ""; width: 26px; height: 2px; background: #000; }
.cf-header h1,
.cf-header h2 {
  font-family: var(--cf-font);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}
.cf-header h2 em {
  font-style: italic;
  background: var(--cf-pink);
  padding: 0 0.12em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cf-sub {
  margin-top: 16px;
  color: var(--cf-ink-soft);
  font-size: clamp(14px, 1.6vw, 16px);
}

/* ---------- Layout ---------- */
.cf-layout {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}
@media (max-width: 900px) { .cf-layout { grid-template-columns: 1fr; } }

/* ---------- Blocks ---------- */
.cf-block {
  background: var(--cf-white);
  border: 1px solid #000;
  border-radius: var(--cf-r);
  padding: clamp(22px, 2.6vw, 32px);
  margin-bottom: 16px;
  overflow: hidden;
}
.cf-bh { display: flex; align-items: baseline; gap: 11px; margin-bottom: 6px; }
.cf-bn {
  font-style: italic;
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  background: var(--cf-orange);
  border: 1px solid #000;
  border-radius: 999px;
  padding: 3px 10px;
}
.cf-bt { font-weight: 600; font-size: clamp(18px, 2.2vw, 23px); letter-spacing: -0.01em; }
.cf-bd { color: var(--cf-ink-faint); font-size: 13.5px; margin-bottom: 18px; }
.cf-bd .cf-opt { color: #000; font-weight: 500; background: var(--cf-blue); padding: 1px 7px; border-radius: 6px; }
.cf-field { margin-bottom: 17px; min-width: 0; }
.cf-field:last-child { margin-bottom: 0; }
.cf-lab { display: block; font-size: 13px; font-weight: 600; margin-bottom: 9px; }
.cf-hint { font-size: 12px; color: var(--cf-ink-faint); margin-top: 7px; line-height: 1.45; }
.cf-accent-txt { color: #000; font-weight: 600; background: var(--cf-orange); padding: 0 5px; border-radius: 5px; }

/* ---------- Inputs ---------- */
.cf-sheet input[type="text"],
.cf-sheet input[type="email"],
.cf-sheet textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: var(--cf-font);
  font-size: 15px;
  color: #000;
  background: var(--cf-paper-2);
  border: 1px solid #000;
  border-radius: var(--cf-r-s);
  padding: 11px 13px;
  transition: box-shadow 0.15s, background 0.15s;
}
.cf-sheet textarea { resize: vertical; min-height: 74px; }
.cf-sheet input:focus,
.cf-sheet textarea:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 181, 107, 0.55);
}
.cf-sheet input::placeholder,
.cf-sheet textarea::placeholder { color: #b3ab92; }
.cf-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cf-grid2 .cf-field { margin-bottom: 0; }
.cf-grid2 + .cf-field,
.cf-grid2 + .cf-grid2 { margin-top: 16px; }
@media (max-width: 520px) { .cf-grid2 { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Pill option groups ---------- */
.cf-opts { display: flex; flex-wrap: wrap; gap: 9px; }
.cf-pill { position: relative; cursor: pointer; }
.cf-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cf-pill span {
  display: block;
  padding: 9px 15px;
  border: 1px solid #000;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  background: var(--cf-white);
  transition: all 0.15s;
  white-space: nowrap;
}
.cf-pill span small { color: var(--cf-ink-faint); font-weight: 400; margin-left: 5px; }
.cf-pill:hover span { background: var(--cf-blue); }
.cf-pill input:checked + span { background: var(--cf-blue); color: #000; border-color: #000; }
.cf-pill input:checked + span small { color: var(--cf-ink-soft); }
.cf-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 181, 107, 0.6); }

/* ---------- Checkbox cards ---------- */
.cf-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .cf-checks { grid-template-columns: 1fr; } }
.cf-chk { position: relative; cursor: pointer; display: block; }
.cf-chk input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cf-box {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid #000;
  border-radius: var(--cf-r-s);
  background: var(--cf-white);
  transition: all 0.15s;
}
.cf-tick {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1.5px solid #000;
  border-radius: 5px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  transition: all 0.15s;
}
.cf-tick svg { width: 11px; height: 11px; opacity: 0; transform: scale(0.5); transition: all 0.15s; stroke: #000; }
.cf-txt { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.cf-txt b { display: block; font-weight: 600; }
.cf-txt em { font-style: normal; font-weight: 600; font-size: 12px; background: var(--cf-orange); border-radius: 5px; padding: 0 5px; }
.cf-txt .cf-tbd { color: var(--cf-ink-faint); font-style: italic; font-size: 12px; font-weight: 400; }
.cf-chk:hover .cf-box { background: var(--cf-blue-tint); }
.cf-chk input:checked + .cf-box { background: var(--cf-pink-tint); border-color: #000; }
.cf-chk input:checked + .cf-box .cf-tick { background: #000; border-color: #000; }
.cf-chk input:checked + .cf-box .cf-tick svg { opacity: 1; transform: scale(1); stroke: var(--cf-paper); }
.cf-chk input:focus-visible + .cf-box { box-shadow: 0 0 0 3px rgba(255, 181, 107, 0.5); }
.cf-chk.cf-disabled { opacity: 0.38; pointer-events: none; }

/* ---------- Stepper ---------- */
.cf-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #000;
  border-radius: 999px;
  background: var(--cf-white);
  overflow: hidden;
}
.cf-stepper button {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 20px;
  color: #000;
  display: grid;
  place-items: center;
  transition: background 0.15s;
  font-family: var(--cf-font);
}
.cf-stepper button:hover { background: var(--cf-blue); }
.cf-stepper button:active { background: var(--cf-orange); }
.cf-stepper .cf-val { min-width: 46px; text-align: center; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.cf-step-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cf-step-meta { font-size: 12.5px; color: var(--cf-ink-faint); }

/* ---------- Reveal ---------- */
.cf-reveal { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.3s, margin 0.3s; }
.cf-reveal.cf-show { max-height: 560px; opacity: 1; margin-top: 18px; }
.cf-reveal-inner { padding-top: 18px; border-top: 1px dashed #000; }

/* ---------- Included glyphs box ---------- */
.cf-incl { background: var(--cf-paper); border: 1px solid #000; border-radius: var(--cf-r-s); padding: 15px 17px; margin-bottom: 18px; }
.cf-incl-h { font-size: 12px; font-weight: 600; margin-bottom: 11px; display: flex; align-items: center; gap: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.cf-incl-h svg { width: 13px; height: 13px; stroke: #000; }
.cf-incl-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.cf-incl-list li { font-size: 13px; color: var(--cf-ink-soft); line-height: 1.45; display: flex; gap: 10px; }
.cf-incl-list li b { flex: 0 0 92px; color: #000; font-weight: 600; }
.cf-incl-list li .cf-gly { letter-spacing: 0.06em; word-spacing: 0.1em; }
@media (max-width: 520px) { .cf-incl-list li { flex-direction: column; gap: 1px; } .cf-incl-list li b { flex: none; } }

/* ---------- License radio cards ---------- */
.cf-lic-opts { display: flex; flex-direction: column; gap: 10px; }
.cf-lic-card { position: relative; cursor: pointer; display: block; }
.cf-lic-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cf-lic-box { display: block; padding: 13px 16px; border: 1px solid #000; border-radius: var(--cf-r-s); background: var(--cf-white); transition: all 0.15s; }
.cf-lic-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.cf-lic-top b { font-size: 14.5px; font-weight: 600; }
.cf-lic-top em { font-style: normal; font-size: 11.5px; font-weight: 600; background: var(--cf-paper); border: 1px solid #000; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.cf-lic-desc { font-size: 12.5px; color: var(--cf-ink-soft); line-height: 1.5; display: block; }
.cf-lic-card:hover .cf-lic-box { background: var(--cf-blue-tint); }
.cf-lic-card input:checked + .cf-lic-box { border-color: #000; background: var(--cf-pink-tint); }
.cf-lic-card input:checked + .cf-lic-box .cf-lic-top em { background: var(--cf-orange); }
.cf-lic-card input:focus-visible + .cf-lic-box { box-shadow: 0 0 0 3px rgba(255, 181, 107, 0.5); }

/* ---------- Extra styles (type system) ---------- */
.cf-extra-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.cf-extra-style {
  background: var(--cf-paper);
  border: 1px dashed #000;
  border-radius: var(--cf-r-s);
  padding: 18px 18px 6px;
}
.cf-extra-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cf-extra-title { font-weight: 600; font-size: 14px; }
.cf-extra-rm {
  font-family: var(--cf-font);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid #000;
  border-radius: 999px;
  background: var(--cf-white);
  cursor: pointer;
  transition: background 0.15s;
}
.cf-extra-rm:hover { background: var(--cf-pink); }
.cf-extra-add-wrap { margin-top: 14px; }
.cf-extra-add { width: 100%; }

/* ---------- Quote panel (light pastel, Proofokei style) ---------- */
.cf-quote-wrap { position: sticky; top: 12px; }
@media (max-width: 900px) { .cf-quote-wrap { position: static; } }
.cf-quote {
  background: var(--cf-white);
  color: #000;
  border: 1px solid #000;
  border-radius: var(--cf-r);
  padding: 22px 20px;
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.2);
}
.cf-quote::before {
  content: "";
  display: block;
  height: 6px;
  margin: -22px -20px 18px;
  border-radius: var(--cf-r) var(--cf-r) 0 0;
  background: var(--cf-orange);
  border-bottom: 1px solid #000;
}
.cf-q-kick { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cf-ink-soft); font-weight: 600; }
.cf-q-total { font-weight: 600; line-height: 1; margin: 12px 0 4px; letter-spacing: -0.02em; color: #000; }
.cf-q-total .cf-num { font-size: clamp(28px, 4vw, 38px); }
.cf-q-total .cf-cur { font-size: 18px; margin-left: 4px; }
.cf-q-range-sep { color: var(--cf-ink-faint); margin: 0 6px; font-size: 22px; }
.cf-q-note { font-size: 12px; color: var(--cf-ink-soft); line-height: 1.5; margin-bottom: 18px; }
.cf-q-flash { animation: cf-flash 0.4s ease; }

.cf-q-items { border-top: 1px solid rgba(0, 0, 0, 0.16); padding-top: 14px; margin-bottom: 6px; }
.cf-q-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.cf-q-line:last-child { border-bottom: none; }
.cf-q-line .cf-l { color: var(--cf-ink-soft); }
.cf-q-line .cf-l b { color: #000; font-weight: 600; }
.cf-q-line .cf-v { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.cf-q-line.cf-muted .cf-v { color: var(--cf-ink-faint); font-style: italic; font-size: 12px; font-weight: 500; }

.cf-q-tl { margin-top: 16px; padding: 14px 15px; background: var(--cf-white); border: 1px solid #000; border-radius: var(--cf-r-s); }
.cf-q-tl .cf-h { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-ink-faint); font-weight: 600; margin-bottom: 7px; }
.cf-q-tl .cf-v { font-size: 21px; font-weight: 600; color: #000; }
.cf-q-tl .cf-v small { font-size: 12px; color: var(--cf-ink-soft); font-weight: 400; }
.cf-q-tl .cf-phases { font-size: 11.5px; color: var(--cf-ink-faint); margin-top: 6px; }

.cf-q-tbd { margin-top: 14px; padding: 13px 15px; background: var(--cf-paper); border: 1px solid #000; border-radius: var(--cf-r-s); }
.cf-q-tbd .cf-h { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #000; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.cf-q-tbd .cf-h::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cf-orange); border: 1px solid #000; }
.cf-q-tbd ul { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; }
.cf-q-tbd li { font-size: 12.5px; color: var(--cf-ink-soft); padding-left: 14px; position: relative; line-height: 1.4; }
.cf-q-tbd li::before { content: "–"; position: absolute; left: 0; color: var(--cf-ink-faint); }

.cf-q-actions { margin-top: 20px; display: flex; gap: 9px; }
.cf-btn { flex: 1; font-family: var(--cf-font); font-size: 13.5px; font-weight: 600; padding: 13px; border-radius: 999px; cursor: pointer; border: 1px solid #000; transition: all 0.15s; text-align: center; }
.cf-btn-p { background: var(--cf-orange); color: #000; }
.cf-btn-p:hover { background: #FFC285; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); }
.cf-btn-s { background: var(--cf-white); color: #000; }
.cf-btn-s:hover { background: var(--cf-blue); }
.cf-q-disc { font-size: 11px; color: var(--cf-ink-faint); margin-top: 14px; line-height: 1.5; font-style: italic; }

/* ---------- Toast ---------- */
.cf-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #000;
  color: var(--cf-paper);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--cf-font);
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 1300;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.cf-toast.cf-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Quote document (print → PDF) — Proofokei site style ===== */
.qdoc{ display:none; }
.qd-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #000; padding-bottom:15px; margin-bottom:22px; }
.qd-brand{ font-family:var(--cf-font); font-size:27px; font-weight:600; letter-spacing:-.01em; line-height:1; color:#000; }
.qd-brand small{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cf-ink-soft); font-weight:600; margin-top:7px; }
.qd-meta{ text-align:right; font-size:10.5px; color:var(--cf-ink-faint); line-height:1.85; }
.qd-meta b{ color:#000; font-weight:600; }
.qd-badge{ display:inline-block; background:var(--cf-orange); border:1px solid #000; border-radius:999px; padding:2px 12px; font-size:10px; font-weight:600; letter-spacing:.12em; color:#000; margin-bottom:7px; }
.qd-title{ font-family:var(--cf-font); font-size:21px; font-weight:600; letter-spacing:-.01em; margin-bottom:20px; color:#000; }
.qd-grid{ display:flex; gap:30px; margin-bottom:20px; }
.qd-col{ flex:1; }
.qd-h{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#000; font-weight:600; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.qd-h::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cf-orange); border:1px solid #000; flex:0 0 auto; }
.qd-col p{ font-size:11.5px; margin:2px 0; color:#000; }
.qd-col p.muted{ color:var(--cf-ink-faint); }
.qd-box{ background:var(--cf-paper); border:1px solid #000; border-radius:12px; padding:15px 17px; }
.qd-sec{ margin-bottom:18px; }
.qd-scope{ list-style:none; margin:0; padding:0; font-size:11.5px; }
.qd-scope li{ margin:4px 0; padding-left:15px; position:relative; color:var(--cf-ink-soft); line-height:1.5; }
.qd-scope li::before{ content:"–"; position:absolute; left:0; color:var(--cf-ink-faint); }
.qd-scope li b{ color:#000; font-weight:600; }
.qd-calc-note{ font-size:10.5px; color:var(--cf-ink-faint); line-height:1.6; margin:2px 0 12px; }
table.qd-cost{ width:100%; border-collapse:collapse; margin:2px 0 14px; font-size:11.5px; }
table.qd-cost td{ padding:8px 2px; border-bottom:1px solid rgba(0,0,0,.12); color:#000; vertical-align:top; }
table.qd-cost td.num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600; }
table.qd-cost .formula{ display:block; color:var(--cf-ink-faint); font-size:10px; font-weight:400; margin-top:3px; }
table.qd-cost tr.sub td{ border-top:1px solid #000; border-bottom:none; font-weight:600; padding-top:9px; }
table.qd-cost tr.sub td .formula{ font-weight:400; }
table.qd-cost tr.disc td{ color:var(--cf-ink-soft); }
table.qd-cost tr.disc td.num{ color:var(--cf-ink-faint); font-style:italic; font-weight:500; font-size:10.5px; }
.qd-total{ display:flex; justify-content:space-between; align-items:center; background:#000; color:var(--cf-paper); padding:14px 18px; border-radius:12px; margin-top:4px; }
.qd-total .lbl{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.qd-total .amt{ font-family:var(--cf-font); font-size:20px; font-weight:600; letter-spacing:-.01em; }
.qd-total .amt small{ font-size:12px; color:var(--cf-orange); margin-left:3px; font-weight:600; }
.qd-tl{ background:var(--cf-paper); border:1px solid #000; border-radius:12px; padding:14px 16px; font-size:11.5px; color:var(--cf-ink-soft); line-height:1.55; }
.qd-tl b{ color:#000; }
.qd-list{ list-style:none; margin:0; padding:0; font-size:11px; }
.qd-list li{ margin:3px 0; padding-left:15px; position:relative; color:var(--cf-ink-soft); line-height:1.5; }
.qd-list li::before{ content:"–"; position:absolute; left:0; color:var(--cf-ink-faint); }
.qd-terms{ font-size:11px; color:var(--cf-ink-soft); line-height:1.6; }
.qd-note{ font-size:10px; color:var(--cf-ink-faint); font-style:italic; margin-top:14px; line-height:1.55; }
.qd-foot{ margin-top:22px; padding-top:14px; border-top:1px solid #000; display:flex; justify-content:space-between; font-size:10px; color:var(--cf-ink-faint); }
.qd-foot b{ color:#000; font-weight:600; }
.qd-brief{ display:flex; flex-direction:column; gap:10px; }
.qd-brief-row{ display:flex; flex-direction:column; gap:3px; }
.qd-brief-lbl{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--cf-ink-faint); font-weight:600; }
.qd-brief-val{ font-size:11.5px; color:var(--cf-ink-soft); margin:0; line-height:1.55; }

/* PDF section toggles */
.cf-pdf-sections{ margin-top:14px; padding-top:12px; border-top:1px dashed rgba(0,0,0,.18); }
.cf-pdf-sec-h{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--cf-ink-faint); font-weight:700; margin-bottom:8px; }
.cf-pdf-sec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px 4px; }
.cf-pdf-sec-row{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--cf-ink-soft); padding:3px 0; cursor:pointer; user-select:none; }
.cf-pdf-sec-row input[type=checkbox]{ width:12px; height:12px; accent-color:#1a1a1a; cursor:pointer; flex-shrink:0; }

/* Phased timeline in PDF */
.qd-phase{ margin-bottom:10px; }
.qd-phase-h{ font-size:11px; font-weight:700; margin-bottom:3px; color:var(--cf-ink); }
.qd-phase-dur{ font-weight:400; color:var(--cf-ink-faint); margin-left:4px; }
.qd-list{ margin:2px 0 0; padding-left:16px; }
.qd-list li{ font-size:11.5px; color:var(--cf-ink-soft); line-height:1.65; margin-bottom:1px; }

/* Bank / payment info in PDF */
.qd-bank{ display:flex; gap:16px; align-items:flex-start; }
.qd-bank-info{ font-size:11.5px; line-height:1.9; }
.qd-bank-qr{ width:88px; height:88px; border-radius:6px; border:1px solid #DCD3C2; flex-shrink:0; }

@media print{
  @page{ size:A4; margin:16mm 15mm; }
  html,body{ background:#fff !important; }
  .cf-page, .cf-page-nav, .cf-toast, .cf-pdf-sections{ display:none !important; }
  .qdoc{ display:block !important; color:#000; font-family:var(--cf-font); line-height:1.5; }
  .qdoc, .qdoc *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .qd-total, table.qd-cost tr, .qd-sec, .qd-box, .qd-phase{ break-inside:avoid; }
}

@keyframes cf-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cf-flash { 0% { opacity: 0.35; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }