/* Axi Growth, start.html: the questions and the written suggestion.
   Loads after home.css and products.css. products.css supplies the hero, the .buy column, .kv, the close and the form;
   this file adds the problem list, the questions, the plan and its entry blocks, the basket list at the side and the phone bar. */

/* ---------- The three blocks: the problem, the questions, the plan ---------- */
.steps { padding: 64px 0 40px; }
.steps .two { padding: 40px 0 56px; border-top: 1.5px solid var(--ink); row-gap: 24px; }
.steps .two > .head { grid-column: 1 / span 4; position: static; }
.steps .two > .body { grid-column: 5 / span 8; }
.steps .head h2 { font-size: clamp(32px, 3.1vw, 44px); line-height: 0.95; scroll-margin-top: calc(var(--head) + var(--frame) + 24px); }
.steps .head p { margin: 16px 0 0; font-size: 16px; line-height: 1.5; max-width: 34ch; color: var(--ink-2); }
.steps h2[tabindex]:focus { outline: none; }
.steps h2[tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* The problem: seven rows, one radio each, the whole row is the target */
.pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick .row { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.pick .row:first-of-type { padding-top: 4px; }
.pick .row input { grid-row: 1 / span 2; width: 18px; height: 18px; margin: 6px 0 0; accent-color: var(--ink); cursor: pointer; }
.pick .row input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pick .t, .static .t { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); line-height: 0.95; letter-spacing: -0.01em; text-wrap: balance; transition: color 0.2s; }
.pick .s, .static .s { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-3); margin-top: 6px; max-width: 60ch; text-wrap: pretty; }
.pick .row:hover .t, .pick .row.on .t, .pick .row:has(input:checked) .t { color: var(--red); }
.static { list-style: none; margin: 0; padding: 0; }
.static li { border-bottom: 1px solid var(--rule); }
.static li:first-child a { padding-top: 4px; }
.static a { display: block; padding: 16px 0; }
.static a:hover .t { color: var(--red); }

/* The questions: each one, then its answers set like the options on a group page */
.ask { border: 0; margin: 0; padding: 0 0 22px; min-width: 0; display: grid; gap: 10px; max-width: none; }
.ask + .ask { padding-top: 22px; border-top: 1px solid var(--rule); }
.ask:last-child { padding-bottom: 0; }
.ask legend { padding: 0; font-size: 17.5px; font-weight: 500; line-height: 1.4; float: left; width: 100%; max-width: 64ch; margin-bottom: 6px; color: var(--ink); }
.ask legend + label { clear: both; }
.steps label.opt { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.4; cursor: pointer; color: var(--ink-2); }
.steps label.opt input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.steps label.opt b { display: block; color: var(--ink); font-weight: 600; }
.steps label.opt small { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.ask label.opt { font-size: 16px; max-width: 64ch; }
.ask label.opt input { margin-top: 3px; }

/* ---------- The plan: the basket at the side, the suggestion on the right ---------- */
#plan > .head { position: sticky; top: calc(var(--head) + var(--frame) + 32px); }
#plan > .head .cap { margin: 0; padding: 10px 0 9px; font-size: 14px; font-weight: 500; color: var(--ink-3); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); max-width: none; }
.mini { list-style: none; margin: 0; padding: 0; }
.mini li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.4; }
.mini .w { min-width: 0; }
.mini .n { font-weight: 500; }
.mini .d { color: var(--ink-3); }
.mini .m { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#plan > .head .kv { margin-top: 12px; }
#plan > .head .kv > div { grid-template-columns: 116px 1fr; font-size: 15px; }
#plan > .head .kv dd { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
#plan > .head .empty { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
#plan > .head .btn { margin-top: 20px; }
#plan > .head .all { margin: 18px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); max-width: none; }

#plan-h { font-size: clamp(36px, 3.8vw, 56px); line-height: 0.95; letter-spacing: -0.01em; scroll-margin-top: calc(var(--head) + var(--frame) + 24px); text-wrap: balance; }
.why { margin: 18px 0 0; max-width: 62ch; color: var(--ink-2); font-size: 17.5px; line-height: 1.55; }
#plan-body { margin-top: 36px; }
#plan-body h3.cap { margin: 0; padding: 10px 0 9px; font-family: var(--text); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--ink-3); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); }
#plan-body h3.cap:not(:first-child) { margin-top: 40px; }
#plan-body .entry:has(+ h3.cap) { border-bottom: 0; }

/* An entry: the words, then the same buy column as a group page */
.entry { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--rule); }
.entry:first-of-type, h3.cap + .entry { padding-top: 20px; }
.entry .words { min-width: 0; }
.entry .words h4 { font-size: clamp(28px, 2.8vw, 40px); line-height: 0.95; letter-spacing: -0.01em; }
.entry .what { margin: 12px 0 0; max-width: 64ch; }
.entry .whyline { margin: 12px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.entry .kv { margin-top: 14px; }
.entry .more { margin: 14px 0 0; font-size: 14px; font-weight: 500; }
.entry .buy .acts { display: flex; align-items: center; gap: 16px; }
.entry .buy .acts .btn { flex: 1 1 auto; }
.buy button.u { padding: 12px 0; margin: -12px 0; white-space: nowrap; }
.buy .btn[disabled] { background: var(--paper); color: var(--ink); border-color: var(--ink); cursor: default; }
.buy .btn[disabled]:hover { background: var(--paper); border-color: var(--ink); }
.buy .price:empty { display: none; }

/* ---------- The phone bar: the basket's count and figure, and the way to it ---------- */
.bar { position: fixed; left: calc(var(--frame) + 1.5px); right: calc(var(--frame) + 1.5px); bottom: calc(var(--frame) + 1.5px); height: 56px; z-index: 56; display: none; align-items: stretch; justify-content: space-between; background: var(--paper); color: var(--ink); border-top: 1.5px solid var(--ink); }
.bar .sum { margin: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 0 16px; font-size: 14px; font-weight: 500; line-height: 1.3; min-width: 0; }
.bar .btn { height: auto; border: 0; border-left: 1.5px solid var(--ink); padding: 0 18px; font-size: 20px; flex: 0 0 auto; }

/* ---------- Responsive ---------- */
@media (min-width: 1101px) and (max-height: 660px) {
  #plan > .head { position: static; }
}
@media (max-width: 1100px) {
  .steps .two > .head, #plan > .head { grid-column: 1 / span 12; position: static; }
  .steps .two > .body { grid-column: 1 / span 12; }
  #plan > .body { order: -1; }   /* the suggestion heading leads; the basket summary and totals close the block */
  .steps .head p { max-width: 60ch; }
  .mini, #plan > .head .kv { max-width: 560px; }
  .entry { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 900px) {
  .steps { padding: 56px 0 32px; }
  .steps .two { padding: 32px 0 40px; row-gap: 20px; }
  .steps label.opt { padding: 10px 0; }   /* 21px content plus 20px padding gives a 41px tap target */
  .ask { gap: 2px; }
  .buy fieldset { gap: 2px; }
  .pick .row { padding: 14px 0; }
  .pick .row input { margin-top: 4px; }
  .pick .t, .static .t { font-size: 24px; }
  .pick .s, .static .s { font-size: 14px; }
  .mini, #plan > .head .kv { max-width: none; }
  #plan > .head .btn { display: none; }   /* the bar at the foot of the screen carries the way to the basket */
  #plan-body { margin-top: 28px; }
  #plan-body h3.cap:not(:first-child) { margin-top: 32px; }
  .entry { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
  .entry:first-of-type, h3.cap + .entry { padding-top: 16px; }
  .entry .buy { margin-top: 16px; }
  .bar:not([hidden]) { display: flex; }
  html.has-bar .foot { padding-bottom: calc(var(--frame) + 56px + 40px); }
}

@media print {
  .bar { display: none !important; }
  #plan > .head { position: static; }
  .buy .acts { display: none; }
}