/* Step-by-step quote flow (quote.html + go.html).
   Relies on the shared color/font tokens (--brass, --cream, --line, …) both pages define. */
.qf{text-align:left;scroll-margin-top:110px}
.qf fieldset{border:0;padding:0;margin:0;min-width:0}
.resume-note[hidden]{display:none}  /* styles.css gives it display:flex, which beats [hidden] */
/* homepage hero: the flow makes the card tall, so keep the headline in view beside it (two-column layout only) */
@media(min-width:901px){.hero-copy{position:sticky;top:120px}}
.qf .qf-step[hidden],.qf [hidden]{display:none!important}
.qf .qf-step{animation:qfFade .3s ease}
@keyframes qfFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* collector ⇄ dealer switch */
.qf .qf-switch{all:unset;display:block;cursor:pointer;margin:0 0 18px;padding:10px 14px;border:1px dashed var(--line);border-radius:6px;
  font-size:.82rem;color:var(--cream-dim);line-height:1.4;transition:border-color .2s,color .2s}
.qf .qf-switch b{color:var(--brass);font-weight:600;white-space:nowrap}
.qf .qf-switch:hover{border-color:var(--brass);color:var(--cream)}
.qf .qf-switch:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* quote-type tabs (collection / ring / dealer), styled like browser tabs */
.qf-tabs{display:flex;align-items:flex-end;gap:4px;margin:0 0 22px}
.qf-tabs::after{content:"";flex:1;align-self:stretch;border-bottom:1px solid var(--line)}
.qf-tabs .qf-tab{all:unset;box-sizing:border-box;position:relative;cursor:pointer;white-space:nowrap;
  padding:10px 15px 9px;border:1px solid transparent;border-bottom-color:var(--line);border-radius:9px 9px 0 0;
  background:rgba(8,16,34,.45);color:var(--cream-faint);font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.01em;
  transition:color .2s,background .2s}
.qf-tabs .qf-tab:hover{color:var(--cream);background:rgba(8,16,34,.7)}
.qf-tabs .qf-tab.on{color:var(--cream);background:rgba(198,161,91,.08);border-color:var(--line);border-bottom-color:transparent;
  box-shadow:inset 0 2px 0 var(--brass)}
.qf-tabs .qf-tab:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
@media(max-width:480px){.qf-tabs{gap:3px;align-items:stretch}.qf-tabs::after{display:none}
  .qf-tabs .qf-tab{flex:1 1 0;display:flex;align-items:center;justify-content:center;white-space:normal;text-align:center;line-height:1.25;padding:9px 6px 8px;font-size:.72rem}}

/* progress dots */
.qf-steps{display:flex;align-items:center;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.qf .qf-steps button{all:unset;display:inline-flex;align-items:center;gap:8px;cursor:default}
.qf-steps .dot{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:600;border:1px solid var(--line);color:var(--cream-faint);transition:background .2s,color .2s,border-color .2s}
.qf-steps .lbl{display:none;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.qf-steps .on .dot{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.qf-steps .on .lbl{display:inline}
.qf-steps .done .dot{border-color:var(--brass);color:var(--brass)}
.qf .qf-steps .done{cursor:pointer}
.qf-steps .done:hover .dot{background:rgba(198,161,91,.15)}

.qf-h{font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:-.01em;margin:0 0 6px;color:var(--cream)}
.qf-sub{font-size:.85rem;color:var(--cream-dim);font-weight:300;line-height:1.5;margin:0 0 18px}
.qf-q{font-size:.88rem;color:var(--cream);font-weight:500;margin:0 0 10px;line-height:1.45}
.qf-div{height:1px;background:var(--line);margin:20px 0;border:0}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qf-row3{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px}
@media(max-width:520px){.qf-row3{grid-template-columns:1fr 1fr}.qf-row3 .field:first-child{grid-column:1/-1}}

/* collection value list */
.qf-vals{display:flex;flex-direction:column;gap:8px}
.qf-val{display:flex;align-items:center;justify-content:space-between;gap:14px}
.qf-val > span:first-child{font-size:.92rem;color:var(--cream-dim)}
.qf-val.has > span:first-child{color:var(--cream)}
.qf-money{position:relative;flex:0 0 138px}
.qf-money::before{content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--brass);font-size:.9rem;pointer-events:none}
.qf .qf-money input{width:100%;padding:9px 12px 9px 24px;background:rgba(8,16,34,.7);border:1px solid var(--line);border-radius:4px;
  color:var(--cream);font-family:var(--sans);font-size:16px;text-align:right;transition:border-color .2s,box-shadow .2s}
.qf .qf-money input::placeholder{color:rgba(244,239,226,.28)}
.qf .qf-money input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(198,161,91,.15)}
.qf-val.flash .qf-money input{border-color:var(--brass);box-shadow:0 0 0 3px rgba(198,161,91,.22)}
/* scrolling category list: ~5 rows visible, bottom fade until scrolled to the end */
.qf-scroll{max-height:232px;overflow-y:auto;overscroll-behavior:contain;gap:6px;padding:10px 12px 10px 14px;
  background:rgba(8,16,34,.35);border:1px solid var(--line);border-radius:6px;
  scrollbar-width:thin;scrollbar-color:var(--brass) transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.qf-scroll.at-end{-webkit-mask-image:none;mask-image:none}
.qf-scroll:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.qf-scroll .qf-money{flex-basis:128px}
.qf .qf-scroll .qf-money input{padding-top:7px;padding-bottom:7px}
.qf-scroll-hint{margin:6px 0 0;font-size:.74rem;color:var(--cream-faint);text-align:right;transition:opacity .2s}
.qf-scroll.at-end + .qf-scroll-hint{opacity:0}
/* jewelry line items */
.qf-items{display:flex;flex-direction:column;gap:12px}
.qf-item{padding:14px 16px 2px;background:rgba(8,16,34,.35);border:1px solid var(--line);border-radius:6px;animation:qfFade .25s ease}
.qf-item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.qf-item-n{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.qf .qf-item-x{all:unset;cursor:pointer;font-size:.76rem;color:var(--cream-faint);text-decoration:underline}
.qf .qf-item-x:hover{color:var(--cream)}
.qf-items .qf-item:only-child .qf-item-x{display:none}
.qf-money-full{display:block}
@media(max-width:480px){.qf-item .qf-row{grid-template-columns:1fr;gap:0}}
.qf .qf-money-full input{padding-top:12px;padding-bottom:12px;padding-left:26px!important;text-align:left}  /* !important: styles.css .field input:not(...) out-specifies this */
.qf .qf-add{all:unset;cursor:pointer;margin-top:12px;padding:10px 14px;border:1px dashed var(--line);border-radius:6px;
  font-size:.84rem;font-weight:600;color:var(--brass);transition:border-color .2s,color .2s}
.qf .qf-add:hover{border-color:var(--brass);color:var(--brass-bright)}
.qf .qf-add:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.qf-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.qf-total span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint)}
.qf-total b{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--brass-bright)}
.qf-err{font-size:.8rem;color:#f0a58f;margin:10px 0 0}

/* radios + checkboxes */
.qf-yn{display:flex;gap:22px;margin-bottom:16px}
.qf-yn label,.qf-checks label{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;color:var(--cream-dim);cursor:pointer}
.qf-stack{flex-direction:column;gap:12px}
.qf-note{color:var(--cream-faint);font-size:.84rem}
.qf-help{display:block;margin-top:4px;font-size:.78rem;font-weight:300;color:var(--cream-faint)}
.qf-checks{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;margin-bottom:6px}
.qf-checks .none{grid-column:1/-1}
.qf-cov{grid-template-columns:1fr 1fr;gap:14px 18px}
.qf .qf-cov label{align-items:flex-start}
.qf-cov input{margin-top:1px!important}
.qf-cov small{display:block;margin-top:2px;font-size:.74rem;font-weight:300;color:var(--cream-faint);line-height:1.4}
.qf-cov label:last-child{grid-column:1/-1}
@media(max-width:520px){.qf-cov{grid-template-columns:1fr}}
.qf input[type=radio],.qf input[type=checkbox]{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:none;margin:0;cursor:pointer;
  border:1px solid var(--line);background:rgba(8,16,34,.7);position:relative;transition:background .15s,border-color .15s}
.qf input[type=radio]{border-radius:50%}
.qf input[type=checkbox]{border-radius:4px}
.qf input[type=radio]:hover,.qf input[type=checkbox]:hover{border-color:var(--brass)}
.qf input[type=radio]:checked{border-color:var(--brass)}
.qf input[type=radio]:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--brass)}
.qf input[type=checkbox]:checked{background:var(--brass);border-color:var(--brass)}
.qf input[type=checkbox]:checked::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.qf input[type=radio]:focus-visible,.qf input[type=checkbox]:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.qf input:checked + span,.qf label:has(input:checked){color:var(--cream)}

.qf textarea{width:100%;min-height:84px;padding:12px 14px;background:rgba(8,16,34,.7);border:1px solid var(--line);border-radius:4px;
  color:var(--cream);font-family:var(--sans);font-size:16px;resize:vertical}
.qf textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(198,161,91,.15)}
.qf input[type=date]{color-scheme:dark}
.qf-date{max-width:220px}

/* review */
.qf-summary{background:rgba(8,16,34,.55);border:1px solid var(--line);border-radius:6px;padding:16px 18px;margin-bottom:20px}
.qf-summary dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint);margin-bottom:4px}
.qf-summary dd{margin:0 0 14px;color:var(--cream);font-size:.95rem;line-height:1.5}
.qf-summary dd:last-child{margin-bottom:0}
.qf-summary .big{font-family:var(--serif);font-size:1.35rem;color:var(--brass-bright)}
.qf-callout{background:rgba(198,161,91,.09);border:1px solid var(--line);border-radius:6px;padding:14px 16px 2px;margin-bottom:16px}
.qf-consent{display:flex;gap:11px;align-items:flex-start;font-size:.78rem;color:var(--cream-dim);font-weight:300;line-height:1.5;cursor:pointer;margin:4px 0 4px}
.qf-consent input{margin-top:2px!important}

/* nav buttons */
.qf-nav{display:flex;gap:12px;align-items:center;margin-top:22px}
.qf .qf-btn{flex:1;width:auto;margin:0;padding:14px 18px;border:none;border-radius:4px;cursor:pointer;background:var(--brass);color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:.96rem;transition:background .2s,transform .15s}
.qf .qf-btn:hover{background:var(--brass-bright);transform:translateY(-1px)}
.qf .qf-btn[disabled]{opacity:.55;cursor:wait;transform:none}
.qf .qf-back{flex:0 0 auto;width:auto;margin:0;padding:14px 16px;background:transparent;border:1px solid var(--line);border-radius:4px;color:var(--cream-dim);
  font-family:var(--sans);font-size:.9rem;cursor:pointer;transition:border-color .2s,color .2s}
.qf .qf-back:hover{border-color:var(--brass);color:var(--cream);background:transparent;transform:none}
.qf-call{margin-top:14px;font-size:.78rem;color:var(--cream-faint);line-height:1.5}
.qf-call a{color:var(--brass);text-decoration:underline}
.qf-fine{margin-top:12px;font-size:.72rem;color:var(--cream-faint);line-height:1.5}
.qf-fine a{color:var(--brass);text-decoration:underline}

/* done */
.qf-done{text-align:center;padding:18px 4px 6px}
.qf-done .chk{width:54px;height:54px;margin:0 auto 16px;border-radius:50%;border:1px solid var(--brass);display:flex;align-items:center;justify-content:center;color:var(--brass);font-size:1.4rem}
.qf-done h2{font-family:var(--serif);font-weight:400;font-size:1.55rem;margin:0 0 10px;color:var(--cream)}
.qf-done p{color:var(--cream-dim);font-weight:300;font-size:.95rem;line-height:1.55;margin:0 auto 10px;max-width:34ch}

/* diamond rain on the quote-received screen (physics in rainDiamonds() in quote-flow.js) */
.qf-rain{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999;transition:opacity 1.1s ease}
.qf-rain.fade{opacity:0}
.qf-rain img{position:absolute;left:0;top:0;height:auto;will-change:transform;transform:translate(-200px,-200px);
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.45)) brightness(var(--shine))}
@media(prefers-reduced-motion:reduce){.qf-rain{display:none}}

/* homepage on phones/tablets: show the quote form first (right under the nav), headline after it */
@media(max-width:900px){
  .hero{padding-top:112px}
  .hero-grid > .quote-card{order:-1}
}