/* ==== subpages ==================================================================================== */
.pg-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 64px; align-items: start; padding: 96px 0 64px; }
.pg-h { font-size: 60px; line-height: 1.04; max-width: 11em; }
.pg-head > .lede { padding-top: 12px; max-width: 44ch; }
@media (max-width: 1024px) { .pg-head { padding: 72px 0 48px; } .pg-h { font-size: 50px; } }
@media (max-width: 899px) { .pg-head { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pg-head > .lede { padding-top: 0; } }
@media (max-width: 640px) { .pg-head { padding: 48px 0 36px; } .pg-h { font-size: 38px; line-height: 1.08; } }

/* ---- /order: the form beside its summary sheet ---- */
.od { padding-bottom: 160px; }
.od-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.od-form { display: grid; gap: 26px; min-width: 0; }
.od-alert { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; padding: 14px 18px; background: rgba(var(--accent-rgb), .045); border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 10px; }
.od-alert .tk-g { grid-row: span 2; margin-top: 2px; }
.od-alert-t { font: 590 15px/1.45 var(--font); color: var(--t1); }
.od-alert-d { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--t3); }
/* the entity size: real radios in a vertical list, drawn marks, the chosen row in ink */
.od-ent { gap: 8px; }
/* the focused first option scrolls in with room above it, so the legend and the error stay in view */
.od-opt input { scroll-margin: 132px 0 24px; }
.od-ent-err { margin-top: 0; }
.od-leg { margin-bottom: 8px; font-size: 15px; font-weight: 510; line-height: 1.4; color: var(--t1); letter-spacing: -.01em; }
.od-opts { display: grid; gap: 8px; }
.od-opt { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 13px 14px; border-radius: 10px; cursor: pointer;
  background: var(--field); box-shadow: inset 0 0 0 1px var(--l2); transition: box-shadow .16s var(--ease), background-color .16s var(--ease); }
.od-opt:hover { box-shadow: inset 0 0 0 1px rgba(36,29,16,.3); }
.od-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.od-mk { position: relative; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(36,29,16,.34); transition: box-shadow .16s var(--ease), background-color .16s var(--ease); }
.od-opt input:checked ~ .od-mk { background: var(--t1); box-shadow: inset 0 0 0 1.5px var(--t1); }
.od-opt input:checked ~ .od-mk::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.od-opt:has(input:checked) { background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--t1); }
.od-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.od-ot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; font-size: 15px; line-height: 1.45; }
.od-ot b { font-weight: 590; color: var(--t1); }
.od-ot span { color: var(--t3); font-size: 14px; }
.od-ent .help { font-size: 14px; line-height: 1.5; color: var(--t4); }
.od-opts[aria-invalid="true"] .od-opt { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
/* phones: the label over its hint; every hint keeps two lines, so the options match */
@media (max-width: 640px) { .od-ot { display: grid; gap: 2px; } .od-ot span { min-height: 2.9em; line-height: 1.45; } }
.od-submit { display: grid; gap: 14px; justify-items: start; padding-top: 4px; }
.od-honest { max-width: 60ch; font-size: 14px; line-height: 1.55; color: var(--t2); }
.od-next { margin-top: -6px; max-width: 60ch; font-size: 15px; line-height: 1.55; color: var(--t2); }
.od-fine { max-width: 62ch; margin-top: -10px; }
.od-sum { position: relative; filter: drop-shadow(0 1px 1px rgba(46,32,12,.06)) drop-shadow(0 22px 30px rgba(46,32,12,.10)); }
.od-sheet { position: relative; isolation: isolate; padding: 28px 30px 30px; border-radius: 14px; background: var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%); }
.od-sheet::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 13px; background: var(--sheet);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 33.414px), calc(100% - 33.414px) 100%, 0 100%); }
.od-sum-h { margin-bottom: 14px; font: 600 24px/1.2 var(--serif); letter-spacing: -.012em; color: var(--t1); }
.od-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; font-size: 15px; }
.od-kv dt { color: var(--t2); }
.od-kv dd { margin: 0; color: var(--t1); font-weight: 590; font-variant-numeric: tabular-nums; }
.od-main { padding: 14px 0 16px !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.od-main dt { font-weight: 590; color: var(--t1); }
.od-big { font: 600 36px/1 var(--serif); letter-spacing: -.01em; }
.od-unit { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--t4); }
.od-sub { margin-top: 18px; font: 510 13px/1.4 var(--font); color: var(--t4); }
.od-fees { margin-top: 4px; }
.od-fees > div { padding: 5px 0; border-bottom: 1px solid var(--l1); }
.od-cert { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--t3); }
.od-cert .tlink { font-size: 14px; }
.od-g { margin-top: 18px; padding: 16px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--t3); }
.od-steps { display: grid; gap: 10px; margin-top: 12px; }
.od-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--t2); }
@media (max-width: 1024px) { .od-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } .od-sum { max-width: 560px; } }
@media (max-width: 640px) {
  .od { padding-bottom: 100px; }
  .od-btn { width: 100%; }
  .od-submit { justify-items: stretch; }
  .od-sheet { padding: 22px 20px 26px; }
}

/* ---- /orders/<token> ---- */
.st { padding: 72px 0 160px; }
@media (max-width: 640px) { .st { padding: 40px 0 100px; } }

/* ---- messages: the order 404 and 502, the site 404 ---- */
.msg { padding: 120px 0 180px; }
.msg .label { display: block; margin-bottom: 18px; }
.msg-h { font-size: 60px; max-width: 16ch; }
.msg-lede { margin-top: 20px; max-width: 48ch; }
.msg-act { margin-top: 36px; }
.nf-list { margin-top: 44px; max-width: 640px; border-top: 1px solid var(--line); }
.nf-list a { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 56px; padding: 0 12px; border-bottom: 1px solid var(--line); transition: background-color .12s var(--ease); }
.nf-list a:hover { background: rgba(36,29,16,.035); }
.nf-k { font-size: 13px; color: var(--t4); }
.nf-v { font-size: 16px; font-weight: 510; color: var(--t1); }
.nf-list .ar { color: var(--t4); }
@media (max-width: 640px) { .msg { padding: 64px 0 110px; } .msg-h { font-size: 40px; } .nf-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 6px; } .nf-k { grid-column: 1; } .nf-v { grid-column: 1; } .nf-list .ar { grid-column: 2; grid-row: 1 / span 2; } }

/* ---- /pricing ---- */
.pr { padding-bottom: 24px; }
.pr-plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.pr-card { display: flex; }
.pr-panel { display: flex; flex-direction: column; width: 100%; padding: 32px 34px 32px; }
.pr-name { font: 590 17px/1.35 var(--font); color: var(--t1); }
.pr-price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.pr-amt { font: 600 64px/1 var(--serif); letter-spacing: -.02em; color: var(--t1); }
.pr-unit { font-size: 15px; color: var(--t4); }
.pr-blurb { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--t2); }
.pr-items { margin-top: 24px; border-top: 1px solid var(--l1); }
.pr-items li > span:not(.tk-g) { max-width: 52ch; }
.pr-items li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--l1); font-size: 15px; line-height: 1.5; color: var(--t2); }
.pr-items .tk-g { margin-top: 3px; }
.pr-foot { display: flex; align-items: center; min-height: 48px; margin-top: auto; padding-top: 28px; }
.pr-when { font-size: 15px; color: var(--t3); }
.pr-fees { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.pr-fees-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; }
.pr-feerow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border-top: 1px solid var(--l1); border-bottom: 1px solid var(--l1); }
.pr-feerow > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px; }
.pr-feerow > div + div { border-left: 1px solid var(--l1); }
.pr-feerow > div:first-child { padding-left: 0; }
.pr-feerow dt { font-size: 15px; color: var(--t2); }
.pr-feerow dd { margin: 0; font: 600 24px/1 var(--serif); color: var(--t1); }
.pr-note { margin-top: 16px; max-width: 86ch; }
.pr-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 64px; }
.pr-terms li { padding-top: 20px; border-top: 1px solid var(--line); }
.pr-tt { font: 590 16px/1.4 var(--font); color: var(--t1); }
.pr-td { margin-top: 6px; max-width: 36ch; font-size: 15px; line-height: 1.55; color: var(--t3); }
@media (max-width: 1024px) { .pr-plans { grid-template-columns: minmax(0, 1fr); } .pr-terms { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 640px) {
  .pr-panel { padding: 24px 20px 26px; }
  .pr-amt { font-size: 52px; }
  .pr-items li > span:not(.tk-g) { max-width: 25ch; }
  .pr-blurb { max-width: 22ch; }
  .pr-btn { width: 100%; }
  .pr-feerow { grid-template-columns: minmax(0, 1fr); }
  .pr-feerow > div { padding: 13px 0; }
  .pr-feerow > div + div { border-left: 0; border-top: 1px solid var(--l1); }
}

/* ---- /fees: a document page; the table stacks into labelled rows on phones ---- */
.fe { padding-bottom: 24px; }
@media (min-width: 1025px) { .fe > .wrap { max-width: calc(1040px + 2 * var(--gut)); } }
.fe-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; margin-bottom: 16px; }
.fe-ver { font: 500 13px/1.4 var(--mono); color: var(--t2); }
.fe-sch { font-size: 14px; color: var(--t4); }
.fe-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fe-table thead th { padding: 14px 20px; border-bottom: 1px solid var(--line); font: 510 13px/1.4 var(--font); color: var(--t4); text-align: left; white-space: nowrap; }
.fe-table tbody th, .fe-table td { padding: 20px; border-bottom: 1px solid var(--l1); vertical-align: top; text-align: left; }
.fe-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.fe-table tbody th { width: 48%; font-weight: 400; }
.fe-t { display: block; font: 590 15px/1.45 var(--font); color: var(--t1); }
.fe-d { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--t3); }
.fe-rule { display: block; margin-top: 8px; font-size: 12.5px; color: var(--t4); }
.fe-note { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--t4); }
.fe-table .fe-sub th { padding: 18px 20px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--l1); font: 590 14px/1.4 var(--font); color: var(--t1); background: rgba(36,29,16,.02); }
.fe-table .fe-amt { text-align: right; white-space: nowrap; font: 590 16px/1.45 var(--font); color: var(--t1); font-variant-numeric: tabular-nums; }
.fe-table thead .fe-amt { font: 510 13px/1.4 var(--font); color: var(--t4); }
.fe-table .fe-span { text-align: right; }
.fe-table .fe-s { text-align: right; white-space: nowrap; }
.fe-src { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 510; color: var(--t1); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .22em; }
.fe-src:hover { color: var(--accent); }
.fe-inc { background: rgba(36,29,16,.02); }
.fe-how { margin-top: 48px; max-width: 760px; }
.fe-list { margin-top: 14px; border-top: 1px solid var(--line); }
.fe-list li { padding: 12px 0; border-bottom: 1px solid var(--l1); font-size: 16px; line-height: 1.55; color: var(--t2); }
.fe-list .fe-preview { color: var(--t3); font-size: 15px; }
.fe-cert { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--t3); }
@media (max-width: 860px) { .fe-table tbody th { width: 40%; } .fe-table thead th, .fe-table tbody th, .fe-table td { padding: 16px 14px; } }
@media (max-width: 680px) {
  .fe-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fe-table, .fe-table tbody, .fe-table tr, .fe-table th, .fe-table td { display: block; width: auto; }
  .fe-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 18px 16px; border-bottom: 1px solid var(--line); }
  .fe-table tbody:last-child tr:last-child { border-bottom: 0; }
  .fe-table tbody tr.fe-sub { display: block; padding: 0; }
  .fe-table .fe-sub th { padding: 16px 18px 12px; }
  .fe-table tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 12px; border: 0; }
  .fe-table td { padding: 10px 0 0; border: 0; }
  .fe-table td.fe-amt { text-align: left; }
  .fe-table td.fe-amt::before { content: attr(data-l); display: block; margin-bottom: 2px; font: 400 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t4); }
  .fe-table td.fe-span { grid-column: 1 / -1; text-align: left; }
  .fe-table td.fe-s { grid-column: 1 / -1; padding-top: 14px; text-align: left; }
}

/* ---- /blog (preview) ---- */
.bl { padding-bottom: 24px; }
.bl-list { max-width: 820px; border-top: 1px solid var(--line); }
.bl-list li { padding: 22px 0; border-bottom: 1px solid var(--line); font: 600 22px/1.3 var(--serif); letter-spacing: -.01em; color: var(--t1); }
@media (max-width: 640px) { .bl-list li { padding: 18px 0; font-size: 19px; } }

/* ---- /states (preview only) ---- */
.sx { padding-bottom: 160px; }
.sx-g { margin-top: 40px; }
.sx-g .nf-list { margin-top: 14px; max-width: 900px; }
.sx-g .nf-list a { grid-template-columns: 260px minmax(0, 1fr) auto; }
@media (max-width: 640px) { .sx-g .nf-list a { grid-template-columns: minmax(0, 1fr) auto; } }