/* exe.dev Pricing, the 2026 design: a Yellow dark head with its holes punched through; the three plans side by side on
   the head's left edge, each with its own control; and, on its own page, one long sheet comparing them, its plan names
   staying in view as you read down it. The cards hold still whatever you choose (Hunter, Oct 16): every price is one size, with "/ month" on
   its own line below, and the lines under it keep their height. */
.p-head { --sheet-ink: var(--tan-light); flex: 1; display: grid; grid-template-columns: 62% minmax(0, 1fr); min-height: clamp(260px, 36svh, 380px); background: rgb(152, 136, 71); color: var(--sheet-ink); }
.p-head .r2 { left: 62%; }
.p-head h1 { margin: 0; padding: 30px 40px 30px 74px; font: 300 clamp(56px, 9cqi, 132px)/.98 var(--font-serif); letter-spacing: -.025em; }

/* the plans: three sheets on the head's left edge */
.p-row { margin-top: clamp(28px, 5svh, 56px); }
.p-plans { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4cqi, 22px); align-items: stretch; }
.p-plans > .bed { display: flex; }
.p-sheet { --sheet-ink: var(--black); --sheet-bg: var(--medium-sheet); flex: 1; min-width: 0; display: flex; flex-direction: column; container: plan / inline-size; background: var(--sheet-bg); color: var(--sheet-ink); }
.p-in { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; padding: 30px 34px 32px; }
.p-name { margin: 0; font: 300 clamp(34px, 13cqi, 46px)/1 var(--font-serif); letter-spacing: -.02em; }
.p-line { margin: 12px 0 0; min-height: 2.9em; font: 400 14.5px/1.45 var(--font-tw); text-wrap: pretty; }
.p-price { margin: 30px 0 0; display: flex; align-items: baseline; gap: 2px; font: 300 64px/1 var(--font-serif); font-size: min(64px, calc((100cqi - 72px) / 4.45)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-price .p-cur { font-size: .55em; align-self: flex-start; margin-top: .14em; letter-spacing: 0; }
/* Work's regular price, crossed out beside its intro price */
.p-price .p-was { align-self: flex-start; margin: .3em .5em 0 0; font: 400 15px/1 var(--font-tw); letter-spacing: 0; opacity: .7; }
.p-per { margin: 10px 0 0; min-height: 2.4em; font: 400 14px/1.2 var(--font-tw); }   /* two lines in every card, for Work's intro term */
.p-free { display: block; }   /* Personal's trial, under its price (Zoë, Oct 27) */
.p-meta { margin: 12px 0 0; min-height: 2.9em; font: 400 13.5px/1.45 var(--font-tw); text-wrap: pretty; }

/* a plan's control: Personal's pool sizes, a ruler of Primary's ticks with the one you're on filled, square like the
   buttons; Work's pool resources past what it includes, on a slider, priced by the hour or the month */
.p-control { margin-top: 22px; }
.p-label { display: block; margin: 0 0 10px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.p-label-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.p-label-row .p-label { margin: 0; }
.p-size { font: 400 12.5px/1.2 var(--font-tw); }
.p-steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-top: .5px solid currentColor; }
.p-steps button { position: relative; height: 40px; padding: 10px 0 0 8px; border: 0; background: none; color: inherit; text-align: left; font: 400 15px/1 var(--font-tw); cursor: pointer; }
.p-steps button::before { content: ""; position: absolute; left: 0; top: 0; height: 9px; border-left: .5px solid currentColor; }
.p-steps button:first-child::before { display: none; }   /* ticks between the sizes only: one at the very start read as a stray notch */
.p-steps button[aria-checked="true"] { background: var(--sheet-ink); color: var(--sheet-bg); }
.p-steps button:focus-visible { outline: .5px solid currentColor; outline-offset: 3px; }
.p-range { position: relative; height: 34px; }
.p-range input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; color: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; }
.p-range input::-webkit-slider-runnable-track { height: 34px; background: linear-gradient(currentColor, currentColor) 0 50% / 100% .5px no-repeat; }
.p-range input::-moz-range-track { height: .5px; background: currentColor; }
.p-range input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: 10px; border: 0; border-radius: 0; background: var(--sheet-ink); }
.p-range input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 0; background: var(--sheet-ink); }
.p-range input:focus-visible { outline: .5px solid currentColor; outline-offset: 4px; }
/* the slider's stops, under its track, the thumb's half-width in from each end */
.p-ticks { position: relative; height: 22px; margin: -6px 7px 0; font: 400 11.5px/1 var(--font-tw); }
.p-ticks span { position: absolute; top: 0; left: calc(var(--i) / var(--n) * 100%); display: grid; justify-items: center; gap: 4px; transform: translateX(-50%); }
.p-ticks i { display: block; height: 7px; border-left: .5px solid currentColor; }
.p-estimate { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 14px; margin-top: 12px; }
.p-estimate output { font: 400 14px/1.2 var(--font-tw); font-variant-numeric: tabular-nums; }
.p-toggle { display: inline-grid; grid-template-columns: auto auto; border: .5px solid currentColor; }
.p-toggle button { height: 30px; padding: 0 12px; border: 0; background: none; color: inherit; font: 400 13px/1 var(--font-tw); cursor: pointer; }
.p-toggle button[aria-pressed="true"] { background: var(--sheet-ink); color: var(--sheet-bg); }
.p-toggle button:focus-visible { outline: .5px solid currentColor; outline-offset: 3px; }

/* what each plan includes, a starfish on each line (Primary's) */
.p-star { display: block; width: 12.7px; height: 12.7px; background: currentColor; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.p-sheet { --star: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012.73%2012.73%22%3E%3Cpath%20d%3D%22M6.36304%200L7.46788%203.42516L10.5159%201.51152L9.1606%204.84552L12.7256%205.33881L9.54431%207.02164L11.9582%209.69104L8.43946%208.93528L8.57272%2012.5318L6.36304%209.69104L4.15335%2012.5318L4.28661%208.93528L0.767912%209.69104L3.18177%207.02164L0.000496387%205.33881L3.56547%204.84552L2.21018%201.51152L5.25819%203.42516L6.36304%200Z%22%2F%3E%3C%2Fsvg%3E"); }
.p-points { margin: 26px 0 0; padding: 0; list-style: none; font: 300 16px/1.35 var(--font-serif); }
.p-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); padding: 9px 0; border-top: .5px solid color-mix(in srgb, var(--sheet-ink) 30%, transparent); text-wrap: pretty; }
.p-points .p-star { margin-top: .32em; }
.p-cta { margin-top: auto; padding-top: 28px; }
.p-cta .btn { height: 42px; padding: 0 16px; font-size: 14.5px; }

/* under the plans, the way to the long comparison, which has its own page (Oct 27: Philip and Bryan) */
.p-more-row { margin-top: 24px; }
.p-more { grid-column: 2; margin: 0; font: 400 15px/1.4 var(--font-tw); }

/* the long sheet, on /ht/pricing/compare, straight under the head: every plan's details, in Primary's table (rules,
   typewriter values, the starfish for included) */
.p-detail { margin-top: clamp(28px, 5svh, 56px); }
.p-detail .p-in { padding: 34px clamp(26px, 5cqi, 72px) 40px 74px; }   /* just past the binding line */
.p-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font: 300 16px/1.35 var(--font-serif); }
.p-cmp col.l { width: 34%; }
/* the plan names stay in view as you read down; the sheet's own colour behind them, so at rest nothing shows */
.p-cmp thead th { position: sticky; top: 0; z-index: 2; padding: 14px 12px 12px 0; background: var(--sheet-bg); text-align: left; vertical-align: top; font: 300 24px/1 var(--font-serif); letter-spacing: -.01em; border-bottom: .5px solid currentColor; }
.p-cmp thead small { display: block; margin-top: 6px; font: 400 12px/1.35 var(--font-tw); letter-spacing: 0; text-wrap: pretty; }
.p-cmp tbody th { padding: 11px 16px 10px 0; text-align: left; font-weight: 300; }
.p-cmp tbody th .pen-link { --pencil-drop: -5px; }
.p-cmp td { padding: 11px 12px 10px 0; font: 400 13.5px/1.4 var(--font-tw); vertical-align: top; text-wrap: pretty; }
.p-cmp tbody tr:not(.grp) { border-top: .5px solid color-mix(in srgb, var(--sheet-ink) 26%, transparent); }
.p-cmp tr.grp th { padding: 40px 0 10px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.p-cmp .y .p-star { margin-top: .2em; }
.p-cmp .n { opacity: .45; }
.p-switch-bar { display: none; }

@container main (max-width: 980px) {
  .p-plans { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .p-in { padding: 28px 26px 30px; }
  /* stacked, a card has no neighbour to line up with, so its lines take only the room they need */
  .p-line, .p-per, .p-meta { min-height: 0; }
  .p-line { margin-top: 10px; }
  .p-price { margin-top: 24px; }
  .p-per[aria-hidden="true"], .p-meta[aria-hidden="true"] { display: none; }
  .p-detail .p-in { padding: 28px 26px 30px 62px; }
  /* one plan at a time (Oct 27: as a table, its two columns wrapped every row into a wall of text, Zoë): its switch
     rides along under the top bar, each fact takes a line with its value on the right, and what the plan has or
     hasn't goes two to a line, a starfish or a dash first. It's still the one table, so agents read every plan. */
  .p-switch-bar { position: sticky; top: 0; z-index: 3; display: block; margin-top: -10px; padding: 10px 0 12px; background: var(--sheet-bg); border-bottom: .5px solid currentColor; }
  .p-switch { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; width: max-content; max-width: 100%; border: .5px solid currentColor; }
  .p-switch button { height: 34px; padding: 0 14px; border: 0; background: none; color: inherit; font: 400 14px/1 var(--font-tw); cursor: pointer; }
  .p-switch button[aria-selected="true"] { background: var(--sheet-ink); color: var(--sheet-bg); }
  .p-switch button:focus-visible { outline: .5px solid currentColor; outline-offset: 3px; }
  .p-cmp, .p-cmp thead, .p-cmp thead tr { display: block; }
  .p-cmp { margin-top: 0; }
  .p-cmp colgroup, .p-cmp :is(.c0, .c1, .c2), .p-cmp thead th:first-child { display: none; }
  .p-cmp[data-show="0"] .c0, .p-cmp[data-show="1"] .c1, .p-cmp[data-show="2"] .c2 { display: block; }
  .p-cmp thead th { position: static; padding: 14px 0 0; border: 0; background: none; }
  .p-cmp thead .p-col-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the switch names it */
  .p-cmp thead small { margin: 0; font-size: 13px; }
  .p-cmp tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .p-cmp tbody tr { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; }
  .p-cmp tr.grp th { flex: 1; max-width: none; padding: 32px 0 10px; }
  .p-cmp tbody th { flex: 0 0 auto; max-width: 70%; padding: 10px 0 9px; }   /* the label keeps its line; a long value wraps */
  .p-cmp td { flex: 0 1 auto; min-width: 0; margin-left: auto; padding: 10px 0 9px; text-align: right; text-wrap: balance; }
  .p-cmp[data-show="0"] tr:has(> .c0:is(.y, .n)), .p-cmp[data-show="1"] tr:has(> .c1:is(.y, .n)), .p-cmp[data-show="2"] tr:has(> .c2:is(.y, .n)) { grid-column: auto; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 0; }
  .p-cmp td:is(.y, .n) { order: -1; margin: 0; padding: 9px 0 8px; text-align: left; }
  .p-cmp[data-show="0"] tr:has(> .c0:is(.y, .n)) th, .p-cmp[data-show="1"] tr:has(> .c1:is(.y, .n)) th, .p-cmp[data-show="2"] tr:has(> .c2:is(.y, .n)) th { max-width: none; padding: 8px 0; font-size: 15px; }
  .p-cmp .y .p-star { margin-top: .3em; }
  .p-cmp[data-show="0"] tr:has(> .c0.n) th, .p-cmp[data-show="1"] tr:has(> .c1.n) th, .p-cmp[data-show="2"] tr:has(> .c2.n) th { opacity: .45; }
}
@container main (max-width: 900px) {
  .p-head { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .p-head .r2 { display: none; }
  .p-head h1 { padding: 28px 24px 8px 58px; font-size: clamp(56px, 16cqi, 96px); }
  .p-row { margin-top: 16px; }
  .p-more-row { margin-top: 18px; }
}
@container page (max-width: 900px) {
  .p-switch-bar { top: 60px; }   /* under the phone's top bar */
}

/* dark: the plans' sheets go to Primary's Tan dark with light type, as About's team does */
html[data-theme="dark"] .p-sheet { --sheet-ink: var(--tan-light); --sheet-bg: var(--tan-sheet); }
html[data-theme="dark"] .p-more { color: var(--tan-light); }   /* it sits on the ground, not on a sheet */