/* Insurance page: ruled rows for the close, one framed offer for the free read, two framed price tiles. */
.page-head .who { margin-bottom: 14px; font-size: 15px; color: var(--text-2); }
.page-head h1 { max-width: 16em; }
.standfirst { margin-top: var(--gap-sf); max-width: var(--measure); font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.standfirst .textlink { display: inline; min-height: 0; color: var(--text); }

/* Ruled rows: a hairline above the group and between rows, name on the left, sentence on the right */
.rows { list-style: none; margin: var(--gap-block) 0 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px var(--split-gap); padding: var(--pad-row) 0; border-bottom: 1px solid var(--line); }
.rows h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3-row); line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.rows p { max-width: var(--measure); font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.rows--tight li { padding: 16px 0; }
@media (max-width: 760px) { .rows li { grid-template-columns: minmax(0, 1fr); } }

/* The free read: one framed offer, copy left, the four facts right */
.read { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap-block) var(--split-gap); padding: var(--frame-pad); border: var(--frame-border); border-radius: var(--radius); }
.read-copy p { margin-top: var(--gap-sf); max-width: var(--measure); font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.read-copy .terms { font-size: 14px; color: var(--text-3); }
.read-copy .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: var(--gap-block); }
.read-copy .aside { font-size: 14px; color: var(--text-3); }
.read-facts { margin: 0; align-self: start; border-top: 1px solid var(--line); }
.read-facts > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.read-facts dt { color: var(--text-3); }
.read-facts dd { margin: 0; color: var(--text-2); }
.read-facts .mono { font-weight: 500; color: var(--text); }
@media (max-width: 860px) { .read { grid-template-columns: minmax(0, 1fr); padding: var(--frame-pad-tight); } }

/* Two price tiles, the same rows as the engagements tiles */
.tiles { list-style: none; margin: var(--gap-block) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cols-gap); row-gap: 0; }
.tiles > li { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; min-width: 0; padding: var(--frame-pad-tight); border: var(--frame-border); border-radius: var(--radius); }
.tiles h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.015em; }
.tiles .price { margin-top: 10px; font-family: var(--mono); font-weight: 500; font-size: var(--fs-figure); line-height: 1.2; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tiles .price .from, .tiles .price .per { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.tiles .price .from { margin-right: 10px; }
.tiles .time { margin-top: 4px; font-size: 14px; color: var(--text-3); }
.tiles .fit { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.tiles h4 { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.tiles .get { list-style: none; margin: var(--gap-label) 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.tiles .get li { position: relative; padding-left: 18px; }
.tiles .get li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
.price-note { margin-top: var(--gap-foot); max-width: var(--measure); font-size: 14px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 760px) { .tiles { grid-template-columns: minmax(0, 1fr); row-gap: var(--cols-gap); } .tiles > li { display: block; } }

/* The sample read: the engine's output on a light document sheet */
.page-head .who .back { min-height: 0; color: var(--text-2); }
.sr-wrap { padding-bottom: var(--band); }
.sr { padding: 48px 56px; border-radius: var(--radius); font-size: 14px; line-height: 1.55; color: var(--text); }
.sr-kicker { font-family: var(--mono); font-size: 12px; color: var(--text-3); letter-spacing: 0.02em; }
.sr h2 { margin: 36px 0 12px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
.sr h3 { margin: 22px 0 8px; font-size: 15px; font-weight: 600; }
.sr p { margin: 8px 0 0; max-width: 72ch; color: var(--text-2); }
.sr p strong { color: var(--text); }
.sr ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); }
.sr li + li { margin-top: 4px; }
.sr code { font-family: var(--mono); font-size: 0.92em; }
.sr-table { margin-top: 10px; overflow-x: auto; overscroll-behavior-x: contain; }
.sr table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sr th, .sr td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.sr th, .sr td.n, .sr td code { white-space: nowrap; }
.sr td:first-child { min-width: 9em; }
.sr th { font-weight: 500; color: var(--text-3); }
.sr .n { text-align: end; }
.sr td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr tr:last-child td { border-bottom: 0; }
.sr-foot { margin-top: 36px !important; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3) !important; }
@media (max-width: 760px) { .sr { padding: 28px 20px; } }

/* The demo excerpt on /insurance */
.demo-sum { margin-top: var(--gap-block); overflow-x: auto; overscroll-behavior-x: contain; }
.demo-sum table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.demo-sum th, .demo-sum td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: start; }
.demo-sum th { font-weight: 500; color: var(--text-3); font-size: 13px; }
.demo-sum td { color: var(--text-2); }
.demo-sum td:first-child { color: var(--text); }
.demo-sum .n { text-align: end; }
.demo-sum td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.demo-sum tfoot td { color: var(--text); font-weight: 500; border-bottom: 0; }
.demo-notes { list-style: none; margin: var(--gap-block) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cols-gap); }
.demo-notes li { padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--text-2); }
.demo-notes strong { display: block; margin-bottom: 4px; font-weight: 500; color: var(--text); }
.demo-link { margin-top: var(--gap-foot); }
@media (max-width: 860px) { .demo-notes { grid-template-columns: minmax(0, 1fr); } }

/* Wide tables scroll sideways inside their block; a shadow at the edge shows there is more */
.sr-table, .demo-sum {
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), transparent) right / 12px 100% no-repeat scroll;
}
.demo-sum {
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, 0.14), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, 0.14), transparent) right / 12px 100% no-repeat scroll;
}