/* Price list checker. Tokens come from site.css (:root). No external fonts or images. */
[hidden] { display: none !important; }

.try-section { padding-top: clamp(2rem, 4vw, 3rem); }
.try-section h2 { margin-bottom: 1.25rem; }
.try-section .quiet { max-width: 72ch; padding: .8rem 1rem; border-left: 3px solid var(--mark-text); background: var(--ground-2); }

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  width: 100%;
  padding: clamp(1.25rem, 3vw, 2rem);
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--ground-2);
  border: 2px dashed var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.drop-zone:hover,
.drop-zone:focus-visible,
.drop-zone.is-over { border-color: var(--ink); background: var(--mark-2); }
.drop-zone:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.drop-title { font-weight: 700; font-size: 1.1rem; }
.drop-help { font-size: .95rem; color: var(--ink-3); }

.notice {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  background: var(--mark-2);
  border-left: 4px solid var(--mark);
  border-radius: var(--radius-s);
  color: var(--ink);
}

.field-label { display: block; margin: 1.5rem 0 .5rem; font-weight: 700; color: var(--ink); }

textarea {
  display: block;
  width: 100%;
  min-height: 9rem;
  padding: .75rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--ground-2);
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-s);
  resize: vertical;
}
textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.try-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.sample-label { margin-top: .75rem; }

.summary { font-size: 1.05rem; color: var(--ink); margin-top: .5rem; }
.try-section h3 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; color: var(--ink); }
.columns { margin: 0; padding-left: 1.2rem; color: var(--ink-2); }
.columns li + li { margin-top: .25rem; }

.privacy {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: #FFF4E0;
  border: 2px solid #B26A00;
  border-radius: var(--radius-s);
  color: var(--ink);
}
.privacy p { margin-top: .35rem; }

.pl-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.check {
  padding: .9rem 1rem;
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-left: 5px solid #B26A00;
  border-radius: var(--radius-s);
}
.check-ok { border-left-color: #1E7A46; }
.check-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.check-head strong { color: var(--ink); }
.check-status { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--ink-2); }
.check-why { margin-top: .45rem; font-size: .95rem; color: var(--ink-2); }
.check-rows { margin-top: .35rem; font-size: .9rem; color: var(--ink-3); overflow-wrap: anywhere; }

.icon { width: 22px; height: 22px; flex: none; }
.icon-ok circle { fill: #1E7A46; }
.icon-warn path:first-child { fill: #FFB020; stroke: #0D1B2A; stroke-width: 1.2; }

.table-wrap { overflow-x: auto; max-width: 100%; }
.preview-table { font-size: .92rem; }
.preview-table caption { text-align: left; font-size: .9rem; color: var(--ink-3); padding-bottom: .5rem; }
.preview-table td, .preview-table th { overflow-wrap: anywhere; }

.honesty {
  margin-top: 1.25rem;
  font-size: .95rem;
  color: var(--ink-2);
  padding-left: .9rem;
  border-left: 3px solid var(--line-2);
}

.cta { background: var(--ground-2); }
.cta .cin7-actions { margin-top: 1.25rem; }
.small-print { margin-top: 1.5rem; font-size: .92rem; }

@media (max-width: 520px) {
  .check-status { margin-left: 0; }
  .preview-table { font-size: .84rem; }
  .try-actions .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .drop-zone { transition: none; }
}

/* Keep checker states on the shared steel / charcoal / coral theme. */
.privacy { background: var(--ground-2); border-color: var(--mark); }
.check { border-left-color: var(--mark); }
.check-ok { border-left-color: var(--ink); }
.icon-ok circle { fill: #155E3F; }
.icon-warn path:first-child { fill: var(--mark); stroke: var(--ink); }
.check-ok .check-status { display: inline-block; margin-left: auto; padding: .25rem .5rem; border-radius: 999px; background: #155E3F; color: #FFFFFF; }
.check-ok .icon-ok path { stroke: #FFFFFF; }
/* 2026-11-05 declutter: helper notes read as quiet hints, not stacked boxes; CTA facts as a 3-up grid */
#paste-help, #paste-help + .quiet, .try-section .sample-label { position: relative; padding: 0 0 0 1.4rem; margin-top: .6rem; border-left: 0; background: none; color: var(--ink-2, #52606c); font-size: .9rem; line-height: 1.5; }
#paste-help::before, #paste-help + .quiet::before, .try-section .sample-label::before { content: ''; position: absolute; left: .2rem; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mark, #FF4B32); }
.try-actions { margin-top: 1.25rem; }
.try-facts { display: grid; gap: .75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.try-facts li { display: grid; gap: .25rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line, #cbd2d9); border-top: 4px solid var(--ink, #17191C); }
.try-facts li:nth-child(2) { border-top-color: var(--mark, #FF4B32); }
.try-facts b { font-size: 1.05rem; }
.try-facts span { color: var(--ink-2, #52606c); line-height: 1.5; }
@media (min-width: 720px) { .try-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cta .small-print { border-left: 0; background: none; padding-left: 0; }
.try-section .wrap > p.sample-label { padding: 0 0 0 1.4rem; border-left: 0; background: none; }
.try-facts li { align-content: start; }