/* decide + close: android, cost, buildbuy, consent, checklist, book, questions */
.cl-page { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }

/* android: two separate measures, each its own figure with its own whole and its own source */
.cl-and { display: grid; grid-template-columns: 548px minmax(0, 1fr); gap: 84px; margin-top: 42px; padding-bottom: 10px; }
.cl-and > div { display: flex; flex-direction: column; justify-content: space-between; }
.cl-stat { margin: 0; padding-top: 14px; border-top: 1px solid var(--ink); }
.cl-meas { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; line-height: 1.3; color: var(--soft); }
.cl-meas span:first-child { letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.cl-stat figcaption { margin-top: 8px; font-size: 23px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.cl-bar { display: flex; gap: 3px; height: 34px; margin-top: 16px; }
.cl-bar i { background: #000; }
.cl-bar .cl-apple { background: var(--blue); }
.cl-bar .cl-rest { background: var(--line); }
.cl-leg { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: 20px; color: var(--grey); }
.cl-leg b { margin-right: 9px; font-size: 42px; line-height: 1.1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.cl-leg .cl-a b { color: var(--blue); }
.cl-ask { font-size: 24px; line-height: 1.34; }
.cl-vs table.t { border-top: 1px solid var(--ink); table-layout: fixed; }
.cl-vs table.t th { padding: 15px 20px 15px 0; border-bottom-color: var(--line); font-size: 27px; font-weight: 600; letter-spacing: -.03em; text-transform: none; color: var(--ink); }
.cl-vs table.t th:first-child { width: 196px; }
.cl-vs table.t th:nth-child(2) { width: 283px; }
.cl-vs table.t td { padding: 16px 24px 16px 0; text-wrap: balance; }
.cl-caveat { display: block; margin-top: 3px; font-size: 19px; }
.cl-vs table.t td:last-child, .cl-vs table.t th:last-child { padding-right: 0; }

/* cost: a ledger in three groups */
.cl-cost { align-self: center; width: 100%; margin: 30px 0 14px; border-collapse: collapse; border-bottom: 1px solid var(--ink); }
.cl-cost th, .cl-cost td { padding: 16px 32px 16px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.cl-cost tbody tr:first-child > * { border-top-color: var(--ink); }
.cl-cost th { width: 196px; font-size: 15px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.cl-cost td:nth-last-child(2) { width: 452px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.cl-cost td:last-child { padding-right: 0; font-size: 26px; line-height: 1.34; color: var(--grey); }
.cl-cost .cl-price { font-size: 30px; letter-spacing: -.03em; }
.cl-opt { display: inline-block; padding: 5px 14px 6px; border: 1px solid #bdbdbd; color: var(--ink); }
.cl-cost em { margin: 0 14px; color: var(--blue); }

/* buildbuy: three ways, then the seven questions */
.cl-bb { display: flex; flex-direction: column; justify-content: space-between; margin-top: 30px; }
.cl-way { display: flex; flex-direction: column; padding-top: 18px; border-top: 1px solid var(--ink); }
.cl-way h3 { display: flex; align-items: center; gap: 14px; font-size: 34px; }
.cl-way svg { flex: none; width: 42px; height: 42px; fill: none; stroke: var(--ink); stroke-width: 2; }
.cl-way p { margin-top: 12px; font-size: 24px; line-height: 1.36; }
.cl-way p.small { margin-top: auto; font-size: 20px; color: var(--grey); }
.cl-way p.cl-own { font-size: 30px; letter-spacing: -.03em; line-height: 1.15; }
.cl-way p.small::before { content: ""; display: block; width: 100%; margin: 14px 0 12px; border-top: 1px solid var(--line); }
@supports (grid-template-rows: subgrid) { /* footnotes start on one line across the three columns */
  .cl-bb .cols { grid-template-rows: auto auto auto; row-gap: 0; }
  .cl-way { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
  .cl-way p.small { margin-top: 0; }
}
.cl-seven { padding: 22px 32px 24px; }
.cl-seven h3 { font-size: 26px; }
.cl-seven ul.ticks { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 10px 56px; margin-top: 14px; }
.cl-seven ul.ticks li { margin: 0; font-size: 23px; color: var(--ink); }

/* consent: three duties */
.cl-consent { grid-template-rows: auto minmax(0, 1fr) auto; }
.cl-consent > .cols { align-self: center; }
.cl-duty { padding-top: 24px; border-top: 1px solid var(--ink); }
.cl-duty svg { display: block; width: 76px; height: 76px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.cl-duty h3 { margin-top: 24px; font-size: 36px; }
.cl-duty p { margin-top: 14px; }
.cl-consent .tiny { margin: 12px 0 10px 25px; }

/* checklist */
.cl-check { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 84px; align-items: center; }
.cl-steps .row { grid-template-columns: 56px 1fr; gap: 20px; padding: 20px 0; }
.cl-steps .row p { font-size: 26px; line-height: 1.3; }
.cl-qr img { width: 340px; height: 340px; padding: 20px; border: 1px solid var(--ink); background: #fff; }
.cl-qr .kicker { margin: 22px 0 6px; }
.cl-qr p:last-child { font-size: 22px; letter-spacing: -.01em; white-space: nowrap; }

/* book */
.cl-cta { display: flex; align-items: center; gap: 30px; margin-top: 40px; }
.cl-cta img { width: 148px; height: 148px; padding: 9px; border: 1px solid var(--ink); background: #fff; }
.cl-cta .btn { min-height: 62px; padding: 0 30px; font-size: 24px; gap: 14px; }
.cl-cta .btn svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; }
.cl-url { margin-top: 14px; font-size: 22px; color: var(--ink); }
.cl-hosts { display: flex; gap: 44px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.cl-hosts > div { display: flex; align-items: center; gap: 16px; }
.cl-hosts img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }
.cl-hosts strong { display: block; font-size: 22px; }
.cl-hosts span { font-size: 19px; color: var(--grey); }

/* questions */
#questions h1 { font-size: 118px; }
.cl-hint { margin-top: 34px; }
.cl-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cl-chip { position: relative; min-height: 138px; padding: 20px 56px 20px 24px; border: 1px solid #bdbdbd; background: #fff; text-align: left; display: flex; align-items: flex-start; font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.16; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.cl-chip::after { content: ""; position: absolute; right: 24px; bottom: 24px; width: 13px; height: 13px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: rotate(45deg); }
.cl-chip:hover, .cl-chip:focus-visible { background: var(--blue-tint); border-color: var(--blue); color: var(--blue); }
.cl-close { margin-right: 12px; }