/* The Sync demo (B3). Example data only: Northwind Freight is fictional.
   The app at its real size, the way Linear shows its product (Will, 2026-11-02): 14px text, a 232px
   rail, 700px tall, page columns as wide as the app's own, the app's buttons (white on blue), outlined
   cards and tables, underline tabs, a blue question bubble. Content that runs past the window fades
   out rather than being cut. Text sizes are in em, so the narrower windows (How it works, the category
   pictures) set a smaller font-size on .win and everything follows. */

.win { position: relative; max-width: 1240px; margin: 0 auto; background: var(--bg); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .09), inset 0 1px 0 rgb(255 255 255 / .05), 0 48px 110px -24px rgb(0 0 0 / .72);
  font-size: 14px; line-height: 1.5; letter-spacing: -.006em; color: var(--text); text-align: left; }
:where(.win) button { font: inherit; color: inherit; letter-spacing: inherit; }
.win svg { flex: none; }
.win__grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 700px; }

/* rail */
.rail { display: flex; flex-direction: column; min-width: 0; padding: 12px 10px; background: var(--rail); border-right: 1px solid var(--hair); }
/* the list fills the rail and fades if a window is too short for it (no theme switch or account: Will, 2026-11-02) */
.rail__nav { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
.rail__brand { display: flex; align-items: center; gap: 10px; flex: none; margin: 4px 8px 22px; }
.rail__brand .lockup { gap: 8px; }
.rail__brand .lockup svg { width: 17px; }
.rail__brand .lockup b { font-size: .8em; }
.rail__brand small { position: relative; font-size: .86em; color: var(--text-3); white-space: nowrap; }
.rail__brand small::after { content: ""; position: absolute; left: 0; right: -10px; bottom: -11px; height: 1px; background: var(--hair-2); }   /* the app's short rule under Sync 2.0 */
.ri { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 8px; border-radius: 8px; color: color-mix(in srgb, var(--text) 86%, transparent); font-size: .93em; white-space: nowrap; text-align: left; transition: background-color .15s, color .15s; }
.ri svg { width: 16px; height: 16px; color: var(--text-2); }
.ri:hover { background: rgb(255 255 255 / .04); color: var(--text); }
.ri.on { background: rgb(255 255 255 / .07); color: var(--text); }
.ri > span:not(.ct):not(.kbd) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* a label shortens before it can push a count out */
.ri .kbd { flex: none; margin-left: auto; padding: 1px 6px; border-radius: 6px; background: rgb(255 255 255 / .07); font-size: .76em; color: var(--text-2); }
.ri .ct { flex: none; margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgb(255 255 255 / .07); font-size: .76em; display: grid; place-items: center; color: var(--text-2); }
.ri .ct--sig { background: color-mix(in oklch, var(--signal) 30%, transparent); color: color-mix(in oklch, var(--signal), white 50%); }
.rail__sec { margin: 18px 0 4px; padding: 0 8px; font-size: .86em; color: var(--text-3); }
.ri--sub span { overflow: hidden; text-overflow: ellipsis; }
.ri--pin::before { content: ""; width: 5px; height: 5px; margin: 0 -2px 0 3px; border-radius: 50%; background: var(--text-3); flex: none; }
.ri--pin.on::before { background: var(--signal); }
.ri--new { animation: railIn .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes railIn { from { opacity: 0; transform: translateX(-6px); } }
.avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 999px; background: rgb(255 255 255 / .08); font-size: .74em; font-weight: 500; color: var(--text-2); }

/* the main area and its views */
.main { position: relative; min-width: 0; overflow: hidden; container-type: inline-size; }
.views { position: absolute; inset: 0; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.view.on { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1); }
.mtabs { display: none; }
.bar2 { display: flex; align-items: center; gap: 12px; height: 46px; flex: none; padding: 0 12px 0 22px; border-bottom: 1px solid var(--hair); font-size: .93em; color: var(--text-3); white-space: nowrap; }
.bcrumbs { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.bcrumbs .crumb { color: var(--text-3); transition: color .15s; }
.bcrumbs .crumb:hover { color: var(--text); }
.bcrumbs .sl { color: var(--hair-2); }
.bcrumbs b { color: var(--text); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.bar2 .sp { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.body, .convo { -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }
.body { flex: 1; min-height: 0; overflow: hidden; padding: 34px 32px 24px; }
.col { width: min(680px, 100%); margin: 0 auto; }
.col--w { width: min(760px, 100%); }
.pt { margin: 0; font-size: 1.72em; font-weight: 600; letter-spacing: -.022em; line-height: 1.2; }
.ps { margin: 6px 0 0; max-width: 62ch; font-size: .96em; line-height: 1.55; color: var(--text-2); }
.lbl { margin: 24px 0 10px; font-size: .86em; color: var(--text-3); }
.h { margin: 26px 0 10px; font-size: 1em; font-weight: 600; }
.anote { margin: 12px 0 0; font-size: .86em; line-height: 1.55; color: var(--text-3); }

/* the app's buttons (Kobra): outline, primary (white on blue), ghost */
.abtn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 8px; font-size: .9em; font-weight: 500; white-space: nowrap; transition: background-color .15s, box-shadow .15s, color .15s, filter .15s; }
.abtn svg { width: 14px; height: 14px; }
.abtn--outline { background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text); }
.abtn--outline:hover { background: rgb(255 255 255 / .07); }
.abtn--primary { background: var(--signal); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 0 0 1px color-mix(in oklch, var(--signal), black 22%), 0 1px 2px rgb(0 0 0 / .35); }
.abtn--primary:hover { filter: brightness(1.08); }
.abtn--ghost { color: var(--text-2); }
.abtn--ghost:hover { background: rgb(255 255 255 / .06); color: var(--text); }

/* underline tabs, as on the app's provider and quote pages */
.utabs { display: flex; gap: 22px; margin-top: 22px; border-bottom: 1px solid var(--hair); }
.utabs button { position: relative; height: 36px; padding: 0 2px; font-size: .96em; color: var(--text-3); transition: color .15s; }
.utabs button:hover { color: var(--text); }
.utabs button.on { color: var(--text); }
.utabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.tabbody { margin-top: 16px; }

/* filter chips (outline pills) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); font-size: .86em; color: var(--text-2); transition: background-color .15s, color .15s, box-shadow .15s; }
.chip:hover { color: var(--text); }
.chip.on { background: rgb(255 255 255 / .08); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 26%, transparent); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--text-3)); }

.search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text-3); }
.search svg { width: 16px; height: 16px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: .96em; }
.search input::placeholder { color: var(--text-3); }
.search:focus-within { box-shadow: inset 0 0 0 1px var(--hair-2), 0 0 0 3px color-mix(in oklch, var(--signal) 35%, transparent); }

/* outlined cards and tables */
.box { margin-top: 16px; padding: 16px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); }
.box .bt { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-size: 1.03em; font-weight: 600; }
.box .bt small { font-size: .84em; font-weight: 400; color: var(--text-3); }
.box .bs { margin: 3px 0 0; font-size: .9em; color: var(--text-3); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; font-size: .96em; }
.tbl th, .tbl td { padding: 10px 14px; text-align: left; vertical-align: middle; border-top: 1px solid var(--hair); }
.tbl th { border-top: 0; font-size: .9em; font-weight: 400; color: var(--text-3); }
.tbl td { color: var(--text-2); }
.tbl td b { font-weight: 500; color: var(--text); }
.tbl td .b { white-space: nowrap; }
.tbl--svc td:last-child, .tbl--svc th:last-child { text-align: right; }
.tbl--q td:last-child, .tbl--q th:last-child { text-align: right; }
.tbl--svc td:last-child { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.g td, .tbl--svc tr.g td { background: rgb(255 255 255 / .025); font-size: .93em; color: var(--text-3); text-align: left; white-space: normal; }
.tbl tr.t td { background: rgb(255 255 255 / .025); color: var(--text); }
.tbl tr.t td:last-child { font-weight: 600; }
.tbl--why th, .tbl--why td { text-align: center; }
.tbl--why th:first-child, .tbl--why td:first-child { text-align: left; }
.tbl--why th small { display: block; font-size: .86em; color: var(--text-3); opacity: .8; white-space: nowrap; }
.tbl--why .pl { font-weight: 500; color: var(--text); white-space: nowrap; }
.tbl--why .pl:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2); }
.mk { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.mk.y svg { width: 15px; height: 15px; color: var(--signal); }
.mk.q { color: var(--text-3); font-size: .93em; }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 16px; margin: 0; }
.kv > * { padding: 10px 0; border-top: 1px solid var(--hair); font-size: .96em; }
.kv > :nth-child(1), .kv > :nth-child(2) { border-top: 0; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text); }
.kv dd small { display: block; color: var(--text-3); font-size: .9em; }
.doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); font-size: .96em; }
.doc b { font-weight: 500; }
.doc .b { margin-left: 8px; }
.doc small { display: block; margin-top: 2px; font-size: .9em; color: var(--text-3); }
.doc > svg { width: 15px; height: 15px; color: var(--text-3); }
.doc .more { font-size: .9em; color: var(--text-3); }
.drop { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--hair-2); font-size: .96em; color: var(--text-2); }
.drop svg { width: 16px; height: 16px; color: var(--text-3); }
.drop small { margin-left: auto; font-size: .86em; color: var(--text-3); }
.empty { padding: 28px 16px; text-align: center; font-size: .93em; color: var(--text-3); }
.note { padding: 10px 12px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: .93em; line-height: 1.5; color: var(--text); }

/* home: the app's "New conversation" screen */
.home { display: flex; flex-direction: column; width: min(664px, 100%); margin: 0 auto; padding: 60px 28px 18px; -webkit-mask-image: none; mask-image: none; }
.home h4 { margin: 0; font-size: 1.86em; font-weight: 500; letter-spacing: -.026em; line-height: 1.2; text-align: center; }
.composer { display: flex; align-items: center; gap: 14px; height: 54px; margin-top: 24px; padding: 0 8px 0 22px; border-radius: 999px; background: var(--raised); box-shadow: inset 0 1px 0 var(--lip), 0 0 0 1px rgb(255 255 255 / .03); font-size: 1.07em; color: var(--text-3); transition: box-shadow .2s; }
.composer:focus-within { box-shadow: inset 0 1px 0 var(--lip), 0 0 0 3px color-mix(in oklch, var(--signal) 35%, transparent); }
.composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; text-overflow: ellipsis; }
.composer input::placeholder { color: var(--text-3); }
.composer .mic, .follow > svg { width: 18px; height: 18px; color: var(--text-3); }
.send { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--signal); color: #fff; transition: transform .15s, filter .2s; }
.send svg { width: 17px; height: 17px; }
.composer:not(.ready) .send { filter: saturate(.5) brightness(.75); }
.send.press { transform: scale(.86); }
.ctx { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 12px; font-size: .86em; color: var(--text-3); }
.ctx b { font-weight: 400; color: var(--text-2); }
.ctx button { color: var(--signal); }
.att { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 13px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); text-align: left; }
.att + .att { margin-top: 8px; }
.att__i svg { display: block; width: 17px; height: 17px; color: var(--warn); }
.att b { display: flex; align-items: center; gap: 8px; font-size: 1em; font-weight: 500; }
.att small { display: block; margin-top: 2px; font-size: .93em; color: var(--text-3); }
.att .open { display: inline-flex; align-items: center; gap: 5px; font-size: .9em; color: var(--text-2); }
.att .open:hover { color: var(--text); }
.att .open svg { width: 14px; height: 14px; }
.att--due { grid-template-columns: auto minmax(0, 1fr) auto; }
.starts { display: grid; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hair); }
.starts button { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); text-align: left; font-size: 1em; transition: box-shadow .15s, background-color .15s; }
.starts button:hover { background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px var(--hair-2); }
.starts small { display: block; font-size: .82em; color: var(--text-3); }
.starts svg { width: 15px; height: 15px; color: var(--text-3); }
.hfoot { margin: auto 0 0; padding-top: 20px; text-align: center; font-size: .82em; color: var(--text-3); }

/* conversation */
.convo { flex: 1; min-height: 0; overflow: hidden; padding: 30px 32px 0; }
.convo .col { width: min(720px, 100%); }
.u { width: fit-content; max-width: 80%; margin-left: auto; padding: 10px 17px; border-radius: 20px; background: var(--signal); color: #fff; font-size: 1em; line-height: 1.45; }
.work { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: .93em; color: var(--text-3); }
.work svg { width: 13px; height: 13px; }
.spin { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 1.5px solid var(--hair-2); border-top-color: var(--text-2); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ans { margin: 10px 0 0; font-size: 1.07em; line-height: 1.65; }
.ans b { font-weight: 600; }
.convo h5 { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 1em; font-weight: 600; }
.convo h5 svg { width: 15px; height: 15px; color: var(--text-3); }
.tl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 10px 14px; border-top: 1px solid var(--hair); line-height: 1.5; color: var(--text-2); }
.tl > div:first-child { border-top: 0; }
.tl .d { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.legend { margin: 10px 0 0; font-size: .86em; line-height: 1.55; color: var(--text-3); }
.inans { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; font-size: .86em; color: var(--text-3); }
.inans > span:first-child { margin-right: 4px; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text-2); white-space: nowrap; transition: color .15s, box-shadow .15s; }
button.tag:hover { color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 35%, transparent); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.meta { margin-left: 6px; font-size: .86em; color: var(--text-3); }
.meta button { text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.meta button:hover { color: var(--text); }
.follow { flex: none; display: flex; align-items: center; gap: 14px; width: min(720px, 100% - 64px); height: 52px; margin: 12px auto 18px; padding: 0 8px 0 20px; border-radius: 999px; background: var(--raised); box-shadow: inset 0 1px 0 var(--lip), 0 0 0 1px rgb(255 255 255 / .03); color: var(--text-3); }
.follow > span:first-child { flex: 1; }
.follow .send { width: 36px; height: 36px; filter: saturate(.5) brightness(.75); }
.pend { opacity: 0; transform: translateY(5px); }
.show { opacity: 1; transform: none; transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1); }
.w { opacity: 0; transition: opacity .3s; }
.w.on { opacity: 1; }

/* my business */
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.fields > span small { display: block; margin-bottom: 5px; font-size: .84em; color: var(--text-3); }
.fields > span > span { display: block; padding: 8px 12px; border-radius: 8px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: .96em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finds { margin-top: 8px; }
.find { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--hair); }
.finds > .find:first-child { border-top: 0; }
.find b { display: block; font-size: .96em; font-weight: 500; }
.find small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .86em; color: var(--text-3); }
.find small svg { width: 12px; height: 12px; }
.seg3 { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--hair-2); }
.seg3 button { height: 26px; padding: 0 11px; border-radius: 7px; font-size: .86em; color: var(--text-2); transition: background-color .15s, color .15s; }
.seg3 button:hover { background: rgb(255 255 255 / .07); color: var(--text); }
.find .done { justify-self: end; }
.sites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sites span { padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); font-size: .9em; color: var(--text-2); }

/* providers */
.win .search { margin-top: 20px; }
.win .search + .chips { margin-top: 12px; }
.plist { display: grid; gap: 8px; margin-top: 16px; }
.prov { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); text-align: left; transition: background-color .15s, box-shadow .15s; }
.prov:hover { background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px var(--hair-2); }
.prov b, .sl-card .pl { display: block; font-size: 1em; font-weight: 600; text-align: left; }
.prov small, .sl-card small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 2px; font-size: .9em; color: var(--text-3); }
.prov small span, .sl-card small span, .bdg span { display: inline-flex; align-items: center; gap: 6px; }
.prov small i, .sl-card small i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.prov__r svg { width: 15px; height: 15px; color: var(--text-3); }
.fp { display: flex; gap: 3px; margin-top: 9px; }
.fp i { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--hair-2); }
.fp i.y { background: var(--tone); box-shadow: none; }
.phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.phead .bdg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pstat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 18px; padding: 10px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: .86em; color: var(--text-3); }
.pstat b { margin-left: 5px; font-weight: 400; color: var(--text-2); }
.pstat .live { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.pstat .fp { margin: 0 0 0 auto; }
.tabbody > .doc:first-child { margin-top: 0; }
.body--split { display: grid; grid-template-columns: minmax(0, 1fr) 264px; padding: 0; }
.pmain { min-width: 0; padding: 34px 32px 24px; }
.paside { display: flex; flex-direction: column; gap: 8px; padding: 30px 20px; border-left: 1px solid var(--hair); }
.pbtn { padding: 10px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair-2); background: rgb(255 255 255 / .02); font-size: .93em; text-align: left; transition: background-color .15s; }
.pbtn:hover { background: rgb(255 255 255 / .06); }
.pmeta { margin: 6px 0 0; font-size: .82em; color: var(--text-3); }
.paside .lbl { margin: 18px 0 2px; padding-top: 18px; border-top: 1px solid var(--hair); }
.paside .note { min-height: 92px; }

/* shortlist */
.field { padding: 10px 14px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 1em; }
.sl-card { display: grid; gap: 10px; justify-items: start; margin-top: 12px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); }
.sl-card small { margin-top: -6px; }
.sl-card .note { justify-self: stretch; }
.sl-card .pl:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2); }

/* quotes */
.next, .broker { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--signal-fill); box-shadow: inset 0 0 0 1px var(--signal-edge); }
.next b { display: block; font-size: .96em; font-weight: 600; }
.next p { margin: 3px 0 0; font-size: .9em; line-height: 1.5; color: var(--text-2); }
.next .abtn { flex: none; }
.next.ok { background: color-mix(in oklch, var(--ok) 10%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ok) 40%, transparent); }
.next.ok .k { color: var(--ok); }
.broker { font-size: .96em; }
.broker b { font-weight: 600; }
.broker small { display: block; margin-top: 2px; font-size: .9em; color: var(--text-2); }
.actl { list-style: none; margin: 0; padding: 0; }
.actl li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: .96em; color: var(--text-2); }
.actl li:first-child { border-top: 0; }
.actl li span:first-child { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* dialog, palette, toast */
.scrim { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: var(--scrim, rgb(8 8 9 / .62)); backdrop-filter: blur(3px); opacity: 0; animation: fade .2s forwards; }
@keyframes fade { to { opacity: 1; } }
.dlg { width: min(460px, 100%); border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--hair-2), 0 28px 70px rgb(0 0 0 / .6); padding: 20px 22px; transform: translateY(6px) scale(.985); animation: pop .25s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes pop { to { transform: none; } }
.dlg h5 { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: 1.14em; font-weight: 600; }
.dlg h5 button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--text-3); }
.dlg h5 button svg { width: 15px; height: 15px; }
.dlg h5 button:hover { background: rgb(255 255 255 / .07); color: var(--text); }
.dlg p { margin: 6px 0 0; font-size: .93em; line-height: 1.55; color: var(--text-2); }
.dlg .lbl { margin: 18px 0 8px; }
.dlg .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .96em; }
.check i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--signal); color: #fff; }
.check i svg { width: 12px; height: 12px; }
.pal { width: min(520px, 100%); align-self: start; margin-top: 48px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--hair-2), 0 28px 70px rgb(0 0 0 / .6); overflow: hidden; }
.pal .search { margin: 0; border-radius: 0; box-shadow: none; background: transparent; height: 50px; border-bottom: 1px solid var(--hair); }
.pal ul { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow: hidden; }
.pal li button { display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 12px; border-radius: 8px; font-size: .96em; color: var(--text-2); text-align: left; }
.pal li button svg { width: 15px; height: 15px; color: var(--text-3); }
.pal li button:hover, .pal li button.on { background: rgb(255 255 255 / .07); color: var(--text); }
.toast { position: absolute; left: 50%; bottom: 22px; z-index: 30; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 10px; background: var(--raised); box-shadow: 0 0 0 1px var(--hair-2), 0 14px 36px rgb(0 0 0 / .5); font-size: .93em; white-space: nowrap; transform: translate(-50%, 8px); opacity: 0; transition: opacity .25s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 15px; height: 15px; color: var(--ok); }

/* a narrower main area (How it works with its sidebar, the category pictures): the provider page's side panel goes first */
@container (max-width: 640px) {
  .body, .pmain { padding: 26px 22px 18px; }
  .convo { padding: 24px 22px 0; }
  .follow { width: calc(100% - 44px); }
  .body--split { grid-template-columns: minmax(0, 1fr); }
  .paside, .pstat .fp { display: none; }
}

/* a narrow main area (the category pictures, phones): keep the essentials, never scroll sideways */
@container (max-width: 540px) {
  .body, .pmain { padding: 22px 18px 16px; }
  .convo { padding: 20px 18px 0; }
  .follow { width: calc(100% - 36px); }
  .home { padding: 34px 18px 14px; }
  .home h4 { font-size: 1.5em; }
  .att { grid-template-columns: auto minmax(0, 1fr) auto; }
  .att .open { display: none; }
  .fields { grid-template-columns: 1fr 1fr; }
  .fields > span:nth-child(3) { display: none; }
  .tl > div { grid-template-columns: 1fr; gap: 2px; }
  /* a middle column folds to nothing (display: none would shift the cells after it into its column) */
  .tbl--fold :is(thead th, tr:not(.g):not(.t) > td):nth-child(2) { width: 0; padding: 0; font-size: 0; }
  .tbl--why :is(th, td):nth-child(5) { display: none; }   /* the nice-to-have column; it is the last one, so nothing shifts */
  .tbl--why th, .tbl--why td { padding: 10px 10px; }
  .tbl--why th { font-size: .82em; line-height: 1.3; }
  .meta, .drop small { display: none; }
  .next { flex-direction: column; align-items: flex-start; }
  .doc small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@container (max-width: 440px) {
  .att .abtn { display: none; }
  .att { grid-template-columns: auto minmax(0, 1fr); }
}

/* How it works: the same app, a little smaller, showing states rather than taking clicks */
.win--story { font-size: 13px; pointer-events: none; }
.win--story .win__grid { grid-template-columns: 224px minmax(0, 1fr); height: 600px; }
.sticky { container-type: inline-size; }
@container (max-width: 760px) {   /* a narrow How it works window shows the page itself, as the app does with its sidebar closed */
  .win--story .win__grid { grid-template-columns: minmax(0, 1fr); }
  .win--story .rail { display: none; }
}

/* phones: the rail becomes tabs across the top of the main area */
@media (max-width: 760px) {
  .win { font-size: 13px; }
  .win__grid { grid-template-columns: minmax(0, 1fr); height: 600px; }
  .rail { display: none; }
  .main { display: flex; flex-direction: column; }
  .mtabs { display: flex; gap: 4px; flex: none; padding: 8px 10px; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; background: var(--rail); }
  .mtabs::-webkit-scrollbar { display: none; }
  .mtabs button { flex: none; height: 30px; padding: 0 12px; border-radius: 8px; font-size: .93em; color: var(--text-2); }
  .mtabs button.on { background: rgb(255 255 255 / .08); color: var(--text); }
  .views { position: relative; inset: auto; flex: 1; min-height: 0; }
  .starts button:nth-child(n+3) { display: none; }
  .bar2 .sp .abtn--ghost { display: none; }
  .win--story .win__grid { height: auto; }
}

/* the copies of each How it works state shown under the steps on phones */
.win--mini { border-radius: 14px; pointer-events: none; }
.win--mini .main, .win--mini .views { position: relative; inset: auto; overflow: hidden; }
.win--mini .view { position: relative; opacity: 1; transform: none; }