/* Homepage #platform: heading + Price Lab copy on the left, a compact replica of the app's
   "Set the price" step on the right (profit-by-list-price chart, Future period KPIs table,
   list price and units controls). The chart SVG is drawn by site.js at the container's
   real pixel width, so its text stays crisp at every size. Figures are illustrative. */

.amq-plat {
  display: grid;
  grid-template-columns: minmax(0, 33fr) minmax(0, 67fr);
  gap: clamp(32px, 3.6vw, 56px);
  align-items: start;
  color: #0C2920;
}
.amq-plat-copy { padding-top: 6px; }
.amq-plat-eyebrow {
  font-size: clamp(12px, .72vw, 15px);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #5A6B62;
}
.amq-plat-h2 {
  margin: 18px 0 0;
  font-size: clamp(30px, 2.7vw, 44px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -.015em;
}
.amq-pl-eyebrow {
  margin-top: clamp(28px, 3vw, 44px);
  font-size: clamp(11px, .65vw, 14px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #BB511A;
}
.amq-plat-h3 { margin: 10px 0 0; font-size: clamp(20px, 1.5vw, 24px); font-weight: 600; line-height: 1.15; }
.amq-plat-p { margin: 10px 0 0; max-width: 42ch; color: #5A6B62; font-size: clamp(15px, .9vw, 17px); line-height: 1.6; }

/* ---- the app panel ---- */
.amq-pl-panel {
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E5E2D8;
  border-radius: 14px;
  padding: clamp(16px, 1.6vw, 22px);
  box-shadow: 0 24px 60px -38px rgba(12, 41, 32, .2);
  font-variant-numeric: tabular-nums;
}
.amq-pl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.amq-pl-head h4 { margin: 0; font-size: 17px; font-weight: 600; }
.amq-pl-flag { display: inline-flex; align-items: center; gap: 7px; color: #5A6B62; font-size: 12.5px; }
.amq-pl-flag span { width: 6px; height: 6px; border-radius: 50%; background: #2C6B52; }

/* chart | KPIs on top, the two controls underneath, one shared split */
.amq-pl-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  grid-template-areas: "chart kpi" "price units";
}
.amq-pl-chartcol { grid-area: chart; min-width: 0; padding-right: 16px; }
.amq-pl-kpicol { grid-area: kpi; min-width: 0; border-left: 1px solid #E5E2D8; padding-left: 16px; }
.amq-pl-price { grid-area: price; min-width: 0; padding: 14px 16px 0 0; border-top: 1px solid #E5E2D8; margin-top: 12px; }
.amq-pl-units { grid-area: units; min-width: 0; padding: 14px 0 0 16px; border-top: 1px solid #E5E2D8; border-left: 1px solid #E5E2D8; margin-top: 12px; }

.amq-pl-chartlabels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  font-size: 12px;
  color: #5A6B62;
}
.amq-pl-chartlabels b { font-weight: 500; color: #0C2920; }
.amq-pl-chart { position: relative; height: 200px; margin-top: 6px; }
.amq-pl-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.amq-pl-chart text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.amq-pl-axis-title { margin: 0; text-align: center; font-size: 12px; color: #5A6B62; }

/* ---- KPI table ---- */
.amq-pl-kpihead h5 { margin: 0; font-size: 14.5px; font-weight: 600; }
.amq-pl-terms { margin: 4px 0 0; color: #5A6B62; font-size: 12.5px; line-height: 1.4; }
.amq-pl-terms b { color: #0C2920; font-weight: 600; }
.amq-pl-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13.5px; }
.amq-pl-table caption {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.amq-pl-table th, .amq-pl-table td {
  padding: 7px 0 7px 8px;
  border-bottom: 1px solid #E5E2D8;
  text-align: right;
  white-space: nowrap;
}
.amq-pl-table tr > :first-child { padding-left: 0; text-align: left; white-space: normal; }
.amq-pl-table thead th {
  padding-top: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5A6B62;
  border-bottom-color: #D5D9D3;
}
.amq-pl-table thead th:first-child, .amq-pl-table thead th.amq-pl-you { color: #0C2920; }
.amq-pl-table tbody th { font-weight: 400; line-height: 1.25; }
.amq-pl-table tbody tr:last-child > * { border-bottom: 0; }
.amq-pl-table td.amq-pl-you { font-weight: 700; }
.amq-pl-table td.amq-pl-d { font-weight: 600; }
.amq-pl-up { color: #2C6B52; }
.amq-pl-down { color: #B53A1E; }

/* ---- controls ---- */
.amq-pl-ctrl-row { display: flex; flex-direction: column; gap: 8px; }
.amq-pl-ctrl-row label { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.amq-pl-note { margin-left: 6px; color: #5A6B62; font-size: 12px; white-space: nowrap; }
.amq-pl-inputs { display: flex; gap: 6px; }
.amq-pl-num, .amq-pl-pct {
  box-sizing: border-box;
  height: 38px;
  border: 1px solid #C9CFCA;
  border-radius: 4px;
  background: #FFFFFF;
  color: #0C2920;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.amq-pl-num { flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: 18px; font-weight: 500; }
.amq-pl-pctwrap { position: relative; display: block; flex: 0 0 82px; }
.amq-pl-pct { width: 100%; padding: 0 24px 0 6px; font-size: 14.5px; }
.amq-pl-pctwrap span { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #5A6B62; font-size: 12px; pointer-events: none; }
.amq-pl-num:focus, .amq-pl-pct:focus { outline: 2px solid #2C6B52; outline-offset: 1px; border-color: #2C6B52; }

.amq-pl-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 24px;
  margin: 10px 0 0;
  background: transparent;
  cursor: pointer;
}
.amq-pl-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #8D9690; }
.amq-pl-range::-moz-range-track { height: 4px; border-radius: 2px; background: #8D9690; }
.amq-pl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px; margin-top: -9px;
  border-radius: 50%; border: 3px solid #FFFFFF; background: #2C6B52;
  box-shadow: 0 1px 4px rgba(12, 41, 32, .35);
}
.amq-pl-range::-moz-range-thumb {
  box-sizing: border-box;
  width: 22px; height: 22px;
  border-radius: 50%; border: 3px solid #FFFFFF; background: #2C6B52;
  box-shadow: 0 1px 4px rgba(12, 41, 32, .35);
}
.amq-pl-range:focus-visible { outline: none; }
.amq-pl-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #2C6B52; }
.amq-pl-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #2C6B52; }

/* marks under a slider: --f is the 0..1 position; 11 px = half the thumb */
.amq-pl-marks { position: relative; height: 40px; margin-top: 2px; font-size: 12px; color: #5A6B62; }
.amq-pl-mark {
  position: absolute;
  left: calc(11px + (100% - 22px) * var(--f, .5));
  top: 0;
  transform: translateX(-50%);
  padding-top: 8px;
  white-space: nowrap;
}
.amq-pl-mark::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 6px; background: #8D9690; }
.amq-pl-mark-be { padding-top: 23px; color: #0C2920; }

/* ---- the two columns stack: heading above, panel full width ---- */
@media (max-width: 1179.98px) {
  .amq-plat { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 40px); }
  .amq-plat-copy { max-width: 760px; padding-top: 0; }
  .amq-plat-h2 { font-size: clamp(31px, 4.4vw, 48px); }
}

/* ---- the panel itself stacks ---- */
@media (max-width: 719.98px) {
  .amq-pl-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "price" "kpi" "units"; }
  .amq-pl-chartcol, .amq-pl-price { padding-right: 0; }
  .amq-pl-kpicol, .amq-pl-units { border-left: 0; padding-left: 0; }
  .amq-pl-kpicol { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E5E2D8; }
}

@media (max-width: 560px) {
  .amq-pl-chart { height: 210px; }
  /* Phones: each metric becomes a labelled row of three values, so four columns never
     squeeze past the card. */
  .amq-pl-table, .amq-pl-table thead, .amq-pl-table tbody { display: block; }
  .amq-pl-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; border-bottom: 1px solid #E5E2D8; padding: 8px 0; }
  .amq-pl-table tbody tr:last-child { border-bottom: 0; }
  .amq-pl-table th, .amq-pl-table td, .amq-pl-table thead th { border: 0; padding: 0; }
  .amq-pl-table tr > :first-child { grid-column: 1 / -1; margin-bottom: 2px; }
  .amq-pl-table thead tr { border-bottom-color: #D5D9D3; padding-top: 0; }
  .amq-pl-table thead th:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}