/* The free contract templates: a paper you type on, its "In short" notes in the margin; the printed sheet carries the
   agreement alone. The fields share the site's type-on-the-template look (pages.css, .remind-ph / .cdt-field). */
.contract-tool [hidden] { display:none !important; }
.contract-tool:not(.cdt-ready) .cdt-interactive { display:none; }

/* ---------- the head: what it is, and three plain promises ---------- */
.cdt-hero { padding-block:clamp(40px,6vw,88px) clamp(28px,4vw,44px); }
.cdt-hero h1 { font-family:var(--font-display); font-weight:var(--font-display-weight); font-size:var(--fs-d2); line-height:1.06; letter-spacing:-.045em; margin:16px 0 22px; max-width:15em; }
.cdt-hero .lead { max-width:640px; font-size:var(--fs-lead); color:var(--text-muted); }
.cdt-trail a { color:inherit; text-decoration:none; }
.cdt-trail a:hover { text-decoration:underline; text-underline-offset:3px; }
.cdt-trail [aria-current] { color:var(--caption); }
.cdt-proof { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); margin:var(--space-6) 0 0; padding:0; list-style:none; font-size:var(--fs-sm); color:var(--ink); }
.cdt-proof li { display:inline-flex; align-items:center; gap:var(--icon-gap-sm); }
.cdt-proof .bg-icon { color:var(--gold-deep); }

/* ---------- the four templates: links, so each has its own page ---------- */
.cdt-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); padding-bottom:clamp(28px,4vw,48px); }
.cdt-picker a { position:relative; display:flex; flex-direction:column; gap:6px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r-xl);
    background:var(--bg-panel); color:var(--ink); text-decoration:none; transition:border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast); }
.cdt-picker a:hover { border-color:var(--field-border); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.cdt-picker a:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.cdt-picker a[aria-current] { border-color:var(--gold); background:var(--paper); box-shadow:inset 0 0 0 1px var(--gold); }
.cdt-picker__mark { display:inline-flex; margin-bottom:6px; color:var(--gold-deep); }
.cdt-picker strong { font-size:var(--fs-md); line-height:1.3; font-weight:500; }
.cdt-picker span:not(.cdt-picker__mark) { font-size:var(--fs-sm); line-height:1.55; color:var(--caption); }
.cdt-picker small { margin-top:auto; padding-top:8px; font:var(--fs-xs) var(--font-mono); color:var(--caption); }

/* ---------- the desk: the bar that follows, then the paper ---------- */
.cdt-desk { padding-bottom:clamp(40px,6vw,72px); }
.cdt-bar { position:sticky; top:80px; z-index:var(--z-sticky); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-5);
    max-width:1040px; margin:0 auto var(--space-3); padding:10px 10px 10px 20px; border:1px solid var(--line); border-radius:var(--r-pill);
    background:color-mix(in srgb, var(--bg-panel) 86%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); box-shadow:var(--shadow-sm); }
.cdt-meter { flex:1 1 220px; min-width:0; }
.cdt-meter p { margin:0 0 6px; font-size:var(--fs-sm); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cdt-meter__track { display:block; height:4px; border-radius:var(--r-pill); background:var(--sand-100); overflow:hidden; }
.cdt-meter__fill { display:block; width:0; height:100%; border-radius:inherit; background:var(--gold); transition:width var(--duration-normal) var(--ease-out); }
.cdt-bar.is-complete .cdt-meter__fill { background:var(--status-paid); }
.cdt-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); }
.cdt-act { display:inline-flex; align-items:center; gap:var(--icon-gap-sm); min-height:40px; padding:0 14px; border:0; border-radius:var(--r-pill);
    background:none; color:var(--text-muted); font:inherit; font-size:var(--fs-sm); cursor:pointer; transition:background-color var(--duration-fast), color var(--duration-fast); }
.cdt-act:hover { background:var(--sand-50); color:var(--ink); }
.cdt-act:focus-visible, .cdt-text-button:focus-visible, .cdt-reword:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.cdt-act--next { color:var(--gold-deep); }
.cdt-word { min-height:40px; padding:0 18px; border-radius:var(--r-pill); font-size:var(--fs-sm); gap:var(--icon-gap-sm); }

.cdt-status { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:var(--space-3); max-width:1040px; margin:0 auto var(--space-3);
    font-size:var(--fs-sm); color:var(--text-muted); text-align:center; }
.cdt-status.is-empty { height:0; margin:0; overflow:hidden; }
.cdt-text-button { padding:4px 2px; border:0; border-radius:var(--r-xs); background:none; color:var(--gold-deep); font:inherit; font-size:var(--fs-sm);
    cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.cdt-copy-fallback { max-width:1040px; margin:0 auto var(--space-3); font-size:var(--fs-sm); }
.cdt-copy-fallback textarea { width:100%; margin-top:var(--space-2); padding:12px; border:1px solid var(--field-border); border-radius:var(--r-md);
    background:var(--bg-panel); font:inherit; font-size:16px; line-height:1.5; }

.cdt-after { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3) var(--space-6); max-width:1040px;
    margin:0 auto var(--space-4); padding:var(--space-4) var(--space-5); border:1px solid var(--gold-soft); border-radius:var(--r-xl); background:var(--gold-wash);
    font-size:var(--fs-sm); line-height:1.55; animation:cdt-rise var(--duration-normal) var(--ease-out); }
.cdt-after p { flex:1 1 420px; margin:0; color:var(--text-muted); }
.cdt-after b { color:var(--ink); font-weight:600; }
.cdt-go { display:inline-flex; align-items:center; gap:var(--icon-gap-sm); color:var(--ink); font-weight:600; text-decoration:none; white-space:nowrap; }
.cdt-go:hover { text-decoration:underline; text-underline-offset:3px; }
@keyframes cdt-rise { from { opacity:0; transform:translateY(6px); } }

/* ---------- the paper: the clause on the left, its note in the margin ---------- */
.cdt-paper { max-width:1040px; margin:0 auto; padding:clamp(28px,5vw,72px) clamp(22px,5vw,64px); border-radius:var(--r-lg); background:var(--bg-panel);
    box-shadow:var(--shadow-card); scroll-margin-top:160px; overflow-wrap:anywhere; }
.cdt-paper:focus { outline:none; }
.cdt-paper-head, .cdt-review-note, .cdt-parties, .cdt-signatures, .cdt-paper-foot { max-width:640px; }
.cdt-paper-eyebrow { margin:0; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--caption); }
.cdt-paper h2 { font-family:var(--font-display); font-weight:var(--font-display-weight); font-size:clamp(32px,3.4vw,46px); line-height:1.1; letter-spacing:-.035em; margin:14px 0 10px; }
.cdt-paper-status { margin:4px 0 0; font-size:var(--fs-xs); color:var(--caption); line-height:1.6; }
/* on screen the bar counts what's left; the paper says it again only on paper */
@media screen { .cdt-ready #cdtPaperStatus { display:none; } }
.cdt-review-note { margin:var(--space-5) 0 0; padding:14px 18px; border-left:2px solid var(--gold); background:var(--paper); font-size:var(--fs-xs); line-height:1.6; color:var(--caption); }
.cdt-review-note p { margin:0; }
.cdt-review-note b { color:var(--ink); font-weight:600; }
.cdt-parties { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin:28px 0 12px; padding-block:22px; border-block:1px solid var(--line); }
.cdt-parties dt { margin-bottom:8px; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--caption); }
.cdt-parties dd { margin:0; font-size:var(--fs-sm); line-height:1.6; }
.cdt-parties [data-party] { display:block; width:fit-content; max-width:100%; white-space:pre-wrap; }
.cdt-parties strong { font-weight:600; }
.cdt-parties span[data-party] { margin-top:6px; color:var(--text-muted); }

.cdt-clause { display:grid; grid-template-columns:minmax(0,640px) minmax(160px,1fr); gap:clamp(24px,4vw,56px); padding-block:18px; scroll-margin-top:160px; }
.cdt-clause:target .cdt-clause__text h3 { color:var(--gold-deep); }
.cdt-clause__head { display:flex; align-items:baseline; gap:8px; margin:0 0 8px; }
.cdt-clause h3 { margin:0 0 8px; font-size:var(--fs-sm); font-weight:600; line-height:1.45; }
.cdt-clause__head h3 { margin:0; }
.cdt-clause__n { font:var(--fs-xs) var(--font-mono); color:var(--caption); }
.cdt-clause-body { margin:0; font-family:var(--font-serif); font-size:16px; line-height:1.75; color:var(--ink); white-space:pre-wrap; }
.cdt-clause-body[contenteditable] { margin:-6px -10px; padding:6px 10px; border-radius:var(--r-md); outline:none; box-shadow:0 0 0 2px var(--gold); background:var(--bg-panel); cursor:text; }
.cdt-clause.is-reworded .cdt-clause-body:not([contenteditable]) { box-shadow:-12px 0 0 -10px var(--gold); }
.cdt-reword { margin-left:auto; display:inline-flex; align-items:center; gap:var(--icon-gap-xs); padding:2px 8px; border:0; border-radius:var(--r-pill);
    background:none; color:var(--caption); font:inherit; font-size:var(--fs-xs); font-weight:500; cursor:pointer; opacity:0; transition:opacity var(--duration-fast), background-color var(--duration-fast); }
.cdt-clause:hover .cdt-reword, .cdt-clause:focus-within .cdt-reword, .cdt-reword[aria-pressed="true"] { opacity:1; }
.cdt-reword:hover { background:var(--sand-50); color:var(--ink); }
.cdt-mark { display:inline-flex; align-items:center; gap:var(--icon-gap-xs); padding:1px 8px; border-radius:var(--r-pill); background:var(--gold-wash);
    color:var(--gold-deep); font-size:var(--fs-xs); font-weight:500; }
.cdt-clause__tools { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-4); margin-top:10px; font-size:var(--fs-xs); color:var(--caption); }
.cdt-clause__tools:empty { display:none; }
.cdt-short { align-self:start; padding-top:30px; font-size:var(--fs-sm); line-height:1.55; color:var(--caption); }
.cdt-short b { display:block; margin-bottom:4px; font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); }

.cdt-signatures { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line); font-size:var(--fs-xs); }
.cdt-signatures h3 { margin:0; font-size:var(--fs-sm); font-weight:600; }
.cdt-signatures p { margin:18px 0; }
.cdt-paper-foot { margin:30px 0 0; font-size:var(--fs-xs); color:var(--caption); }
.cdt-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--space-2) var(--space-5); max-width:1040px; margin:var(--space-4) auto 0;
    font-size:var(--fs-sm); color:var(--caption); }
.cdt-bottom p { margin:0; }

/* ---------- BillGrid, beside the work the visitor just did ---------- */
.cdt-send { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,6vw,96px); align-items:center; padding-block:clamp(48px,7vw,96px);
    border-top:1px solid var(--line); }
.cdt-send h2 { font:var(--font-display-weight) clamp(32px,3.6vw,52px)/1.06 var(--font-display); letter-spacing:-.04em; margin:14px 0 18px; }
.cdt-send__copy > p:not(.kicker):not(.cdt-send__fine) { max-width:30em; color:var(--text-muted); font-size:var(--fs-md); line-height:1.6; }
.cdt-send__copy .btn { margin-top:var(--space-4); gap:var(--icon-gap-sm); }
.cdt-send__fine { margin:var(--space-3) 0 0; font-size:var(--fs-xs); color:var(--caption); max-width:34em; }
.cdt-send__run { display:grid; gap:2px; overflow-wrap:anywhere; margin:0; padding:var(--space-2); list-style:none; border-radius:var(--r-2xl); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.cdt-send__run li { display:flex; gap:var(--space-4); padding:var(--space-4) var(--space-5); border-radius:var(--r-xl); background:var(--bg-panel); }
.cdt-send__run li:first-child { border-radius:var(--r-xl) var(--r-xl) var(--r-md) var(--r-md); }
.cdt-send__run li:last-child { border-radius:var(--r-md) var(--r-md) var(--r-xl) var(--r-xl); }
.cdt-send__n { flex:none; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--gold-wash); color:var(--gold-deep);
    font:600 var(--fs-xs) var(--font-mono); }
.cdt-send__run b { font-weight:600; color:var(--ink); }
.cdt-send__run p { margin:4px 0 0; font-size:var(--fs-sm); line-height:1.55; color:var(--caption); }

/* ---------- the guide: answers first, an index that stays in view ---------- */
.cdt-guide { display:grid; grid-template-columns:220px minmax(0,760px); gap:clamp(32px,6vw,96px); padding-block:clamp(40px,6vw,80px); border-top:1px solid var(--line); }
.cdt-guide__toc { position:sticky; top:96px; align-self:start; }
.cdt-guide__toc ol { margin:var(--space-3) 0 0; padding:0; list-style:none; display:grid; gap:var(--space-2); font-size:var(--fs-sm); }
.cdt-guide__toc a { color:var(--text-muted); text-decoration:none; }
.cdt-guide__toc a:hover { color:var(--ink); }
.cdt-topic { padding-bottom:clamp(32px,4vw,48px); scroll-margin-top:96px; }
.cdt-topic h2, .cdt-related h2 { font:var(--font-display-weight) clamp(26px,2.6vw,36px)/1.15 var(--font-display); letter-spacing:-.03em; margin:0 0 16px; scroll-margin-top:96px; }
.cdt-topic > p { color:var(--text-muted); line-height:1.7; }
.cdt-topic > p b { color:var(--ink); font-weight:600; }
.cdt-covers { display:grid; margin:var(--space-5) 0 0; border-top:1px solid var(--line); }
.cdt-covers > div { display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--space-4); padding-block:14px; border-bottom:1px solid var(--line); }
.cdt-covers dt { font-weight:600; font-size:var(--fs-sm); color:var(--ink); }
.cdt-covers dd { margin:0; font-size:var(--fs-sm); line-height:1.6; color:var(--text-muted); }
.cdt-covers__where { display:block; margin-top:4px; font-size:var(--fs-xs); }
.cdt-fits, .cdt-laws, .cdt-related ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin:var(--space-5) 0 0; padding:0; list-style:none; }
.cdt-fits li, .cdt-laws li, .cdt-related li { padding:var(--space-4) var(--space-5); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-panel); }
.cdt-fits a, .cdt-laws a, .cdt-related a { font-weight:600; color:var(--ink); }
.cdt-fits p, .cdt-laws p, .cdt-related p { margin:6px 0 0; font-size:var(--fs-sm); line-height:1.55; color:var(--caption); }
.cdt-topic__more a { display:inline-flex; align-items:center; gap:var(--icon-gap-sm); font-weight:600; }
.cdt-faq .faq { max-width:760px; }
.cdt-checked { margin:0 0 clamp(32px,4vw,48px); font-size:var(--fs-xs); color:var(--caption); }
.cdt-related ul { grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (prefers-reduced-motion: reduce) {
    .cdt-picker a, .cdt-meter__fill, .cdt-after { transition:none; animation:none; }
}
@media (max-width:1000px) {
    .cdt-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cdt-clause { grid-template-columns:1fr; gap:6px; }
    .cdt-short { padding:8px 0 0; font-size:var(--fs-xs); }
    .cdt-short b { display:inline; margin-right:4px; }
    .cdt-send { grid-template-columns:minmax(0,1fr); }
    .cdt-guide { grid-template-columns:1fr; }
    .cdt-guide__toc { position:static; }
    .cdt-reword { opacity:1; }
}
@media (max-width:700px) {
    .cdt-picker { grid-template-columns:1fr 1fr; gap:var(--space-2); }
    .cdt-picker a { padding:14px; }
    .cdt-picker strong { font-size:var(--fs-body); }
    .cdt-picker span:not(.cdt-picker__mark) { display:none; }
    .cdt-bar { top:76px; border-radius:var(--r-xl); padding:10px 12px; gap:6px var(--space-1); }
    .cdt-meter { flex-basis:100%; }
    .cdt-act--next { padding:0 8px 0 0; }
    .cdt-word { padding:0 14px; }
    .cdt-actions { margin-left:auto; }
    .cdt-act span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
    .cdt-act { padding:0 10px; }
    .cdt-paper { padding:28px 20px; border-radius:var(--r-md); }
    .cdt-parties, .cdt-signatures { grid-template-columns:minmax(0,1fr); gap:20px; }
    .cdt-covers > div { grid-template-columns:1fr; gap:4px; }
    .cdt-fits, .cdt-laws, .cdt-related ul { grid-template-columns:1fr; }
    .cdt-bottom { flex-direction:column; gap:8px; }
}
@media print {
    @page { margin:18mm; }
    body.site > :not(main), body.site main > :not(.contract-tool), .contract-tool > :not(.cdt-desk),
    .cdt-desk > :not(.cdt-paper), .cdt-review-note, .cdt-short, .cdt-clause__tools, .cdt-reword, noscript { display:none !important; }
    body.site, body.site main, .contract-tool, .cdt-desk { display:block !important; width:auto !important; max-width:none !important; margin:0 !important;
        padding:0 !important; background:var(--bg-panel) !important; }
    .cdt-paper { max-width:none; border:0; border-radius:0; box-shadow:none; padding:0; overflow:visible; }
    .cdt-paper-head, .cdt-parties, .cdt-signatures, .cdt-paper-foot { max-width:none; }
    .cdt-clause { display:block; padding-block:8pt; }
    .cdt-paper h2 { font-size:28pt; }
    .cdt-paper :is(p,dd,h3), .cdt-clause-body { font-size:10pt; }
    .cdt-paper .cdt-paper-eyebrow, .cdt-paper .cdt-paper-status, .cdt-paper .cdt-paper-foot { font-size:8pt; }
    .cdt-parties, .cdt-signatures { grid-template-columns:minmax(0,1fr) minmax(0,1fr); break-inside:avoid; }
    .cdt-clause h3 { break-after:avoid; }
    .cdt-clause-body { orphans:3; widows:3; }
    .cdt-field { padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; color:inherit !important; }
}