/* Pricing page layout (mockup spacing); tokens only. Loaded after xo.css. */
.xo-pricing-hero {
  padding-bottom: var(--space-16);
}
.xo-pricing-hero-title {
  max-width: 56.25rem;
}
.xo-pricing-plans {
  padding: var(--space-4) 0 var(--space-24);
}
.xo-progress-fill-40 {
  width: 40%;
}
.xo-progress-fill-60 {
  width: 60%;
}
.xo-progress-fill-30 {
  width: 30%;
}
.xo-pricing-enterprise-label {
  margin-bottom: var(--space-2);
}
.xo-pricing-stack-head {
  margin: 0;
}
.xo-pricing-stack-total-label {
  margin: 0 0 var(--space-1);
}
.xo-pricing-extra-cards {
  gap: var(--space-8) var(--space-12);
}
.xo-pricing-close-title {
  max-width: 48.75rem;
}
.xo-page .xo-band .xo-btn-primary {
  box-shadow: var(--shadow-hard);
}

/* Plan cards share rows (mock-up, title, price, list, button) through a subgrid so the three line up across the row. */
@media (min-width: 961px) {
  .xo-pricegrid { align-items: stretch; }
  .xo-pricegrid > .xo-pricecard { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--space-4); align-content: start; }
  .xo-pricegrid > .xo-pricecard > .xo-ticks { align-content: start; }
}
/* The builder starts straight after the enterprise card; the old 96px + 96px stacked into a dead gap. */
.xo-pricing-plans { padding-bottom: var(--space-4); }
.xo-pricing-plans + .xo-section { padding-top: var(--space-16); }
.xo-pricing-plans .xo-quote-row { border-color: var(--line); }

/* Compare table: the box edge carries the hairline, so the top rule runs the full width of the table. */
.xo-compare { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.xo-compare thead th { border-top: 1px solid var(--line-control); }
.xo-compare thead th:first-child { background: var(--paper-sunk); }
.xo-compare tbody td, .xo-compare tbody th { background: var(--paper-raised); }
.xo-compare tbody tr.xo-compare-group th { background: var(--paper-sunk); }
.xo-compare thead th.is-featured { background: var(--paper-sunk); color: var(--ink); }
.xo-compare thead th.is-featured small { color: var(--ink-muted); }
.xo-compare tbody tr:last-child > * { border-bottom: 1px solid var(--line-control); }
.xo-table-scroll { border-top: 0; }

.xo-summary-save s { text-decoration-thickness: 1px; }
@media (max-width: 640px) {
  .xo-summary-save { flex-direction: column; gap: var(--space-1); }
}

/* Phone: the compare table scrolls sideways with the feature column pinned. Columns are sized so the third plan is
   about half in view, which is the cue that there is more to the right. */
@media (max-width: 480px) {
  .xo-table-scroll { max-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
  .xo-compare { table-layout: fixed; width: 428px; min-width: 428px; }
  .xo-compare th, .xo-compare td { padding: var(--space-3) var(--space-2); }
  .xo-compare thead th { font-size: 16px; line-height: 22px; overflow-wrap: normal; }
  .xo-compare thead th small { font-size: 13px; line-height: 18px; }
  .xo-compare td:not(:first-child), .xo-compare th:not(:first-child) { width: 100px; }
  .xo-compare tbody th[scope="row"], .xo-compare thead th:first-child { position: sticky; left: 0; z-index: 1; width: 128px; border-right: 1px solid var(--line-control); }
  .xo-compare thead th:first-child { background: var(--paper-sunk); }
  .xo-compare tbody th[scope="row"] { background: var(--paper-raised); font-size: 14px; line-height: 20px; }
  .xo-compare tr.xo-compare-group th { position: sticky; left: 0; border-right: 0; width: auto; }
  .xo-compare tbody th small { font-size: 13px; line-height: 18px; }
}

/* Phone: the bundle panel dissolves into the builder grid so its total can pin to the bottom of the screen while
   the items are being picked. The other lines keep the panel's box with side and end hairlines. */
@media (max-width: 900px) {
  .xo-summary { display: contents; }
  .xo-summary > * { border-inline: 1px solid var(--line-control); background: var(--paper-raised); }
  .xo-summary > .xo-stack-head { border-top: 1px solid var(--line-control); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: var(--space-4); }
  .xo-summary > .xo-summary-foot { border-bottom: 1px solid var(--line-control); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .xo-summary > .xo-summary-save { background: var(--paper-sunk); }
  .xo-summary > .xo-stack-total { position: sticky; bottom: 0; z-index: 3; border: 1px solid var(--line-control); background: var(--paper-sunk); padding-block: var(--space-3); }
  .xo-builder { row-gap: 0; }
  .xo-builder-main { gap: var(--space-4); }
}

/* Builder groups are <details>: the old legend is the summary, a one-line header with a toggle. */
.xo-group > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0; list-style: none; cursor: pointer; border-bottom: 1px solid var(--line-control); }
.xo-group > summary::-webkit-details-marker { display: none; }
.xo-group > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ink); border-radius: var(--radius-sm); font: 400 14px/1 var(--font-body); letter-spacing: 0; }
.xo-group[open] > summary::after { content: "\2013"; }
.xo-group > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.xo-group[open] > summary { margin-bottom: var(--space-4); }

/* Mock-ups: an empty frame reads as a missing image, so each photo slot holds a tiny layout of text bars and a button shape. */
main .xo-vis-photo { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: var(--space-1); min-height: 52px; border-style: solid; }
.xo-vis-photo::before { content: ""; display: block; width: 72%; height: 4px; border-block: 4px solid var(--line-control); }
.xo-vis-photo::after { content: ""; display: block; width: 38%; height: 8px; border: 1px solid var(--line-control); border-radius: 3px; }

@media (max-width: 480px) {
  .xo-pick > .xo-vis { min-height: 0; }
  .xo-builder .xo-choice { padding: var(--space-3); }
  .xo-pick-price { margin-top: var(--space-1); }
}

/* Scope tags sit above the title so long tags ("In marketing add-on") don't squeeze the title into three lines. */
.xo-builder .xo-co-line { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.xo-builder .xo-co-line > .xo-vis-chip { order: -1; }

/* Phone: collapsed group headers read as one list, 56px rows divided by the hairline. */
@media (max-width: 600px) {
  .xo-builder-main { gap: 0; }
  .xo-group > summary { min-height: 56px; padding-block: 16px; box-sizing: border-box; margin-bottom: 0; }
  .xo-group { gap: 0; }
  .xo-group[open] { padding-bottom: var(--space-4); }
}