/* Fonts load in base.html (Google Fonts). Colors are the site tokens (patronus-site src/styles/tokens.css); there is no accent, so structure is ink (brand decision 05). */
:root{--bone:#eeeee6;--bone-2:#e4e3da;--ink:#1d1d15;--ink-2:#3a3a33;--dim-bone:#4d4c4c;--dim-ink:#bdbcb2;--rule-bone:#c7c6bd;--paper:var(--bone);--white:var(--bone);--muted:var(--dim-bone);--line:var(--rule-bone);--sans:'Host Grotesk',system-ui,sans-serif;--serif:'Source Serif 4',Georgia,'Times New Roman',serif;--mono:'Geist Mono',ui-monospace,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.eyebrow{font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--muted)}
.eyebrow.red{color:var(--ink)}
/* header: the site nav (patronus-site src/site/site.css .st-hd): 72 px, lockup left, 15 px links 28 px apart */
.top{background:var(--bone);border-bottom:1px solid var(--rule-bone);position:sticky;top:0;z-index:5}
.top .wrap{max-width:1440px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);flex:none}
.brand .logo{display:flex;gap:6px;align-items:flex-end;color:var(--ink)}
.lk-mark svg{display:block;margin-bottom:.29px}.lk-word svg{height:18.29px;width:auto;display:block}.lk-word svg path,.lk-word svg [fill]{fill:currentColor}
.brand .sub{font:400 15px/20px var(--sans);color:var(--dim-bone);margin-left:14px;padding-left:14px;border-left:1px solid var(--rule-bone)}
@media not all and (min-resolution:1.5dppx){.cube-2x{display:none!important}}@media (min-resolution:1.5dppx){.cube-1x{display:none!important}}
.top nav{display:flex;gap:28px;align-items:center;font:400 15px/20px var(--sans)}
.top nav a{text-decoration:none;color:var(--ink)}.top nav a:not(.btn):hover{text-decoration:underline}
.top nav a.btn{display:inline-flex;align-items:center;background:var(--ink);color:var(--bone);font:400 14px/18px var(--sans);padding:9px 14px;border:1px solid var(--ink);border-radius:0}.top nav a.btn:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--bone)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);text-decoration:none;font:inherit;font-weight:600;font-size:14.5px;padding:11px 18px;border:1.5px solid var(--ink);border-radius:999px;cursor:pointer}
.btn:hover{background:var(--ink-2);border-color:var(--ink-2)}.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:var(--bone-2);border-color:var(--ink)}
.btn.small{padding:7px 12px;font-size:13px}.btn:disabled{opacity:.4;cursor:not-allowed}
.hero{padding:84px 28px 48px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end}
.hero h1{font-size:64px;line-height:1.02;margin:14px 0 22px}.hero h1 em{font-style:italic}
.hero p{font-size:18px;color:var(--muted);max-width:560px;margin:0 0 14px}.hero p.strong{color:var(--ink)}
.hero .ctas{display:flex;gap:14px;align-items:center;margin-top:26px;flex-wrap:wrap}.hero .ctas a.text{text-decoration:none;color:var(--ink);font-weight:600;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.hero aside{border-left:1px solid var(--line);padding-left:28px}.hero aside .tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.tag{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;background:var(--white)}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.panel{background:var(--bone-2);border:1px solid var(--line);border-radius:18px;padding:40px 44px;margin:28px 0 72px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.panel h2{font-size:38px;line-height:1.1;margin:10px 0 14px}.panel h2 span{display:block;color:var(--muted)}
.panel p{color:var(--muted);margin:0 0 18px}
.steps-mini{display:flex;flex-direction:column}.steps-mini>div{display:flex;gap:14px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}.steps-mini>div:last-child{border-bottom:1px solid var(--line)}
.steps-mini .n{font-family:var(--serif);font-size:26px;color:var(--ink);min-width:44px}.steps-mini .t{font-size:17px;font-weight:600}.steps-mini .d{color:var(--muted);font-size:14px;margin-top:2px}
.panel .foot{color:var(--muted);font-size:14px;margin-top:14px}.panel .foot .ok{color:var(--ink)}
section.flow{padding:48px 0 72px}section.flow h2{font-size:38px;margin:10px 0 8px}section.flow .lede{color:var(--muted);font-size:18px;margin:0 0 36px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.three article{padding:28px 26px 30px;border-right:1px solid var(--line)}.three article:last-child{border-right:0}
.three article .eyebrow{margin-bottom:12px}.three h3{font-size:24px;margin:0 0 10px}.three p{color:var(--muted);margin:0;font-size:15px}
section.faq{padding:48px 0 80px}section.faq h2{font-size:38px;margin:10px 0 8px}section.faq .lede{color:var(--muted);font-size:17px;margin:0 0 20px}
.faq details{border-top:1px solid var(--line);padding:18px 0}.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-family:var(--serif);font-size:20px}.faq summary::after{content:"+";color:var(--muted);font-family:var(--sans)}.faq details[open] summary::after{content:"−"}
.faq p{color:var(--muted);margin:12px 0 0;max-width:720px}
footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--muted);font-size:13.5px}footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}footer a{color:var(--muted)}
/* builder */
.builder{display:none;position:fixed;inset:0;background:var(--paper);z-index:20;overflow:auto}.builder.open{display:block}
.builder .bar{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line);z-index:2}.builder .bar .wrap{display:flex;justify-content:space-between;align-items:center;height:60px;font-size:14px;color:var(--muted)}
.builder .bar button{background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;font-weight:600}
.step{display:none;padding:56px 0 120px}.step.on{display:block}.step .wrap{max-width:860px}
.step h2{font-size:42px;line-height:1.06;margin:12px 0 10px}.step .lede{color:var(--muted);font-size:17px;margin:0 0 30px}
label.f{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--muted);font-weight:500;margin-bottom:18px}
select,input[type=text],input[type=url],input[type=email],input[type=number],textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:13px 14px;outline:none}
select:focus,input:focus,textarea:focus{border-color:var(--ink)}
.hint{color:var(--muted);font-size:13.5px}
.search{display:flex;gap:12px;align-items:center;margin-bottom:8px}.search input{flex:1}
.count{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin:6px 0 18px}.count button{background:none;border:0;color:var(--ink);text-decoration:underline;font:inherit;cursor:pointer}
.cat{border-top:1px solid var(--line);padding:18px 0}.cat h4{margin:0 0 10px;font-size:15px;display:flex;justify-content:space-between;font-weight:600}.cat h4 span{color:var(--muted);font-weight:500;font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:7px 12px 7px 7px;font-size:14px;cursor:pointer;user-select:none}
.chip .m{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700}.chip input{display:none}.chip.sel{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-bottom:10px}
.radios{display:flex;flex-direction:column;gap:6px}.radios label{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--ink);padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white);cursor:pointer}
.radios label:has(input:checked){border-color:var(--ink);background:var(--bone-2)}.radios input{accent-color:var(--ink)}
.navrow{display:flex;justify-content:space-between;align-items:center;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}.navrow .right{display:flex;gap:16px;align-items:center}
.navrow .skip{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;text-decoration:underline}
.review .grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:8px 0 28px}.review .box{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--white)}
.review .box .eyebrow{margin-bottom:8px}.review .box h3{font-size:24px;margin:0 0 6px}.review .box p{margin:0;color:var(--muted)}
.review pre{font:13px/1.5 var(--mono);background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px;white-space:pre-wrap;color:var(--ink)}
.send{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--bone-2);margin-top:22px}.send h3{font-size:22px;margin:0 0 6px}.send p{color:var(--muted);margin:0 0 14px}
.send .row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.done{text-align:center;padding:40px 0}.done h2{font-size:40px}
.ref{display:inline-flex;gap:8px;align-items:center;background:var(--bone-2);border:1px solid var(--line);padding:6px 12px;border-radius:999px;font-size:13px;color:var(--muted)}
.partners-page{padding:72px 0 90px}.partners-page .wrap{max-width:860px}.partners-page h1{font-size:50px;line-height:1.04;margin:12px 0 16px}.partners-page .lede{color:var(--muted);font-size:18px;margin:0 0 30px}
.partners-page form{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}.partners-page form .wide{grid-column:1/-1}
.link-box{font:16px var(--mono);background:var(--white);border:1px solid var(--line);padding:14px 16px;border-radius:12px;display:inline-block;margin:10px 0}
blockquote{margin:16px 0;padding:16px 20px;border-left:2px solid var(--ink);background:var(--white);color:var(--muted);font-family:var(--serif);font-size:18px}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-top:48px}.hero h1{font-size:42px}.hero aside{border-left:0;padding-left:0}.panel{grid-template-columns:1fr;padding:28px}.three{grid-template-columns:1fr}.three article{border-right:0;border-bottom:1px solid var(--line)}.opts,.review .grid,.partners-page form{grid-template-columns:1fr}.send .row{grid-template-columns:1fr}.top nav a:not(.btn){display:none}}

.est{display:grid;gap:14px}.est-card{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:var(--white)}.est-card.warn{background:var(--bone-2)}
.est-card .big{font-family:var(--serif);font-size:40px;line-height:1.1;margin:8px 0 10px;letter-spacing:-.01em}.est-card .drivers{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}.est-card .drivers .tag{font-size:12px;padding:4px 10px}
.gh-box{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--white)}.row-between{display:flex;justify-content:space-between;gap:16px;align-items:center}
.repo-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:320px;overflow:auto;padding:4px 0}.repo{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--paper);cursor:pointer;font-size:14px}.repo .meta{grid-column:2;color:var(--muted);font-size:12.5px}.repo:has(input:checked){border-color:var(--ink)}
table.grades{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:14px}table.grades th{text-align:left;font-size:11px;letter-spacing:.04em;font-family:var(--mono);font-weight:400;color:var(--muted);padding:8px 8px;border-bottom:1px solid var(--line)}table.grades td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}.no{color:var(--dim-bone)}
.facts{grid-template-columns:1fr 1fr 1fr}.checks{display:flex;flex-direction:column;gap:8px;margin-top:6px}.checks label{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--ink)}.checks input{accent-color:var(--ink)}
@media (max-width:860px){.facts,.repo-list{grid-template-columns:1fr}}

/* code step */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 26px}
.choice{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:var(--white);display:flex;flex-direction:column;gap:10px;min-height:170px}
.choice.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.choice.primary .eyebrow{color:var(--dim-ink)}.choice.primary .hint{color:var(--dim-ink)}.choice.primary .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);align-self:flex-start;margin-top:auto}
.choice.primary .btn:hover{background:var(--bone-2);color:var(--ink);border-color:var(--bone-2)}.choice.primary.off{background:var(--bone-2);color:var(--ink);border-color:var(--line)}.choice.primary.off .eyebrow,.choice.primary.off .hint{color:var(--muted)}
.choice h3{font-size:22px;margin:0}.choice .hint{font-size:14px}
.facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 18px;margin:0 0 6px}.facts label.f{margin:0}
.checks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink);padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white);cursor:pointer;line-height:1.35}
.checks label:has(input:checked){border-color:var(--ink);background:var(--bone-2)}.checks input{accent-color:var(--ink);margin-top:2px;flex:none}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.gh-box{margin-top:6px}
@media (max-width:860px){.choices,.facts,.checks{grid-template-columns:1fr}}


#record-sources .chip{padding:8px 14px}

/* preview: owner page v2 */
.hero.v2{align-items:start}.hero.v2 h1{font-size:58px}
.hero aside.trust ul{list-style:none;margin:14px 0 0;padding:0}.hero aside.trust li{padding:12px 0;border-top:1px solid var(--line);font-size:16px;color:var(--ink)}.hero aside.trust li:last-child{border-bottom:1px solid var(--line)}
section.who{padding:8px 0 56px}section.who p{max-width:720px;font-size:18px;color:var(--ink);margin:12px 0 0}section.who p.fit{color:var(--muted);font-size:16px;margin-top:18px}section.who p.fit strong{color:var(--ink)}
.three.four{grid-template-columns:repeat(4,1fr)}.three.four h3{font-size:21px}
@media (max-width:860px){.hero.v2 h1{font-size:40px}.three.four{grid-template-columns:1fr}}


.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:1100px){.top .brand .sub{display:none}}@media (max-width:1023px){.top nav a:not(.btn){display:none}}
@media (max-width:767px){.top .wrap{height:60px;gap:12px;padding:0 16px}.brand .sub{display:none}.top nav{gap:16px}.top nav a:not(.btn){display:none}.top nav a.btn{white-space:nowrap;padding:8px 12px}}
/* Components: one style each, shared with admin.css (consistency pass, Evan 2026-10-26). Dev's most common version,
   recolored to the tokens. Controls 48 px, radius 12; buttons, chips and tags are pills; cards and panels radius 14;
   every border 1 px; one focus ring. */
:root{--r-ctl:12px;--r-card:14px;--ctl-h:48px;--red:var(--ink)} /* --red: the inline error messages (login, partner, portal) read in ink */
select,input[type=text],input[type=url],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input:not([type]),textarea{box-sizing:border-box;height:var(--ctl-h);padding:0 14px;font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--bone);border:1px solid var(--rule-bone);border-radius:var(--r-ctl);outline:none}
textarea{height:auto;min-height:96px;padding:12px 14px}
select:focus,input:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
input[type=checkbox],input[type=radio]{accent-color:var(--ink);width:16px;height:16px;margin:0;flex:none}
.btn{min-height:var(--ctl-h);padding:0 20px;border:1px solid var(--ink);border-radius:999px;font:600 14.5px/1.2 var(--sans)}
.btn.small{min-height:36px;padding:0 14px;font-size:13px}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.radios label,.checks label,.repo{border:1px solid var(--rule-bone);border-radius:var(--r-ctl);background:var(--bone);padding:12px 14px}
.radios label:has(input:checked),.checks label:has(input:checked),.repo:has(input:checked){border-color:var(--ink);background:var(--bone-2)}
.tag,.chip,.ref{border:1px solid var(--rule-bone);border-radius:999px;font-size:13px}
.panel,.review .box,.review pre,.send,.est-card,.gh-box,.choice{border:1px solid var(--rule-bone);border-radius:var(--r-card)}
.choice.primary{border-color:var(--ink)}
.link-box{border:1px solid var(--rule-bone);border-radius:var(--r-ctl);background:var(--bone)}
/* tables: Dev's admin table (table.t), the most common, for the one public table too */
table.grades{border-collapse:separate;border-spacing:0;background:var(--bone);border:1px solid var(--rule-bone);border-radius:var(--r-card);overflow:hidden;font-size:13.5px}
table.grades th{font:400 11px/16px var(--mono);letter-spacing:.04em;color:var(--dim-bone);padding:9px 10px;background:var(--bone-2);border-bottom:1px solid var(--rule-bone);white-space:nowrap}
table.grades td{padding:9px 10px;border-bottom:1px solid var(--rule-bone)}table.grades tr:last-child td{border-bottom:0}
/* phones: wide tables scroll inside their own box instead of widening the page */
@media (max-width:767px){table.grades{display:block;overflow-x:auto}}
label.f{min-width:0}label.f input:not([type=checkbox]):not([type=radio]),label.f select,label.f textarea{width:100%;min-width:0}

/* Sweep 2026-10-26. Field edges use the site's chart gray (#88867e, tokens.css --chart-gray, 3.13:1 on bone) so every
   control boundary passes 3:1 (Evan 2026-10-26). Selects drop the native look (Safari drew a gray gradient) for the
   field style plus an ink chevron. */
:root{--rule-field:#88867e}
select,input[type=text],input[type=url],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input:not([type]),textarea{border-color:var(--rule-field)}
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231D1D15' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;padding-right:40px}
select:focus,input:focus,textarea:focus{border-color:var(--ink)}
.radios label,.checks label,.repo,.chip{border-color:var(--rule-field)}
.radios label:has(input:checked),.checks label:has(input:checked),.repo:has(input:checked),.chip.sel{border-color:var(--ink)}
/* the tool initials in the builder chips: the app paints each a brand color; here they take the tokens */
.chip .m{background:var(--bone-2)!important;color:var(--ink)!important}.chip.sel .m{background:var(--bone)!important}
@media print{.top{position:static}.builder{display:none!important}.btn{border:1px solid var(--ink)}}
/* Sweep fixes (qa-spec 2026-10-23 standard) */
h1,h2,h3{text-wrap:pretty}@media (max-width:480px){h1,h2,h3{text-wrap:balance}}
.eyebrow,table.grades th{font-size:12px}
/* reading measure: long paragraphs stop near 85 characters a line */
.partners-page p,.partners-page li,.three p,.panel p,.lede,.send p,.card p{max-width:56ch}
/* phones: body copy at least 15 px */
@media (max-width:480px){.partners-page p.hint,.card p.hint,.partners-page .hint.wide,.three p{font-size:15px}}
/* the header at 320 to 374 px (also a 1280 window at 400% zoom): the button text takes two lines so the lockup and button fit */
@media (max-width:374px){.top nav a.btn{white-space:normal;max-width:128px;text-align:center;font-size:13px;line-height:16px;padding:6px 12px}.top .wrap{gap:10px}}
/* touch: every link and button gets a 44 px target (the site's invisible-pad pattern for text links) */
@media (pointer:coarse){
  .btn,.btn.small,.top nav a.btn{min-height:44px}
  .top nav a:not(.btn),.brand,.hero .ctas a.text,.faq summary{position:relative}
  .top nav a:not(.btn)::before,.brand::before,.hero .ctas a.text::before{content:'';position:absolute;left:50%;top:50%;width:max(calc(100% + 12px),44px);height:44px;transform:translate(-50%,-50%)}
  .faq summary{min-height:44px;align-items:center}
}
.hero h1{text-wrap:balance}
/* phones: one-column form grids may shrink below a long select's text (WebKit widened the page by 7 px) */
@media (max-width:860px){.opts,.review .grid,.partners-page form{grid-template-columns:minmax(0,1fr)}}
select{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* WebKit counted a long option past the select as page width */