/* Legal hub, design B (Pixel Trim). Part 1: shared structure. Part 2: the Pixel Trim look.
   Body text is 'Nunito Text' (variable, regular + italic; see legal-fonts.css), a separate family
   from the landing page's static Nunito 700 so the two never fight over the same weight. */
/* Part 1 owns layout, the sidebar menu, lists, review chips and the Do Not
   Call notice; Part 2 sets the tokens below to the Pixel Trim treatment. */
:root{
  --bg:#fff; --ink:#1d2b2a; --text:#2b3736; --muted:#5b6866; --rule:#e3e7e6;
  --link:#0d5f55; --link-hover:#137a6b; --focus:#ff5fa8;
  --body-font:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --head-font:'Nunito Text',var(--body-font);
  --side-w:300px; --gap:64px; --measure:46rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Inside the phone frame on a computer (phone.html), like the app pages (base.css). */
.in-frame{scrollbar-width:none}.in-frame::-webkit-scrollbar{display:none}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.65 var(--body-font);overflow-x:hidden}
canvas.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
a{color:var(--link);text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}
:focus-visible{outline:3px dashed var(--focus);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:#083c36;color:#fff;padding:10px 14px;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:600px){.wrap{padding:0 28px}}
.brand{display:inline-block;line-height:0}

/* ---------- layout: content + Helpful Links ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.doc{min-width:0;max-width:var(--measure);overflow-wrap:break-word}
@media (min-width:900px){
  .layout{grid-template-columns:minmax(0,1fr) var(--side-w);grid-template-areas:"main side";column-gap:var(--gap);align-items:start}
  .layout.side-left,.side-left .layout{grid-template-areas:"side main";grid-template-columns:var(--side-w) minmax(0,1fr)}
  .doc{grid-area:main}
  .side{grid-area:side;position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto}
}

/* ---------- sidebar: open list on desktop, collapsed menu on phones ---------- */
.side-menu>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.side-menu>summary::-webkit-details-marker{display:none}
.side-title{display:flex;align-items:center;gap:8px}
.side ul{list-style:none;margin:0;padding:0}
.side a{text-decoration:none}
.side a:hover{text-decoration:underline}
.side a[aria-current="page"]{text-decoration:underline;font-weight:700}
.side-toggle{width:12px;height:12px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.side-menu[open] .side-toggle{transform:rotate(225deg) translate(-2px,-2px)}
@media (max-width:899px){
  .side-menu>summary{cursor:pointer;min-height:48px;padding:10px 14px}
  .side li a{display:block;padding:9px 14px}
}
@media (min-width:900px){
  .side-toggle{display:none}
  .side-menu>summary{cursor:default}
}

/* ---------- document typography ---------- */
.doc>:first-child{margin-top:0}
.doc p{margin:0 0 1em}
.doc h2,.doc h3,.doc h4{color:var(--ink);font-family:var(--head-font);line-height:1.3}
.doc h2{margin:2.1em 0 .6em}
.doc h3{margin:1.6em 0 .35em;font-size:1.05em}
.doc h4{margin:1.3em 0 .3em;font-size:1em;font-style:italic}
.doc h2+h3{margin-top:.9em}
.doc ul,.doc ol{margin:0 0 1.1em;padding-left:1.5em}
.doc li{margin:.4em 0}
.doc li>ul,.doc li>ol{margin:.3em 0 .5em}
.doc strong{color:var(--ink)}
.doc hr{border:0;border-top:1px solid var(--rule);margin:2em 0}
.doc code{font-size:.9em}
.updated{color:var(--muted)}
.updated em{font-weight:700;color:var(--ink)}

/* LendingTree-style page list on the overview: link on its own line, description under it */
.doc .page-list{list-style:none!important;padding:0;margin:1.4em 0 1.6em}
.doc .page-list li{margin:0 0 1.15em;padding:0}
.page-list .pl-link{display:block;font-size:1.06em;font-weight:600}
.page-list .pl-link a{text-decoration:underline}
.page-list .pl-desc{display:block}

/* brand line shown when a funnel site links here with ?bf= */
.brand-line{margin:0 0 1.4em;padding:12px 16px;background:#eef7f4;border-left:4px solid var(--link);color:var(--ink);font-size:.94em}
.brand-line[hidden]{display:none}

/* ---------- review chips (draft only; never on a live site) ---------- */
.ph{background:#fff1a8;color:#4a3500;border:1px dashed #b98a10;border-radius:3px;padding:0 .3em;font-size:.92em;white-space:normal}
.ph::before{content:'[\00a0'}
.ph::after{content:'\00a0]'}
.ar{display:inline;background:#fde4e1;color:#6e1212;border-left:3px solid #c62828;padding:.05em .4em;font-size:.92em}
.ar-tag{font:800 .74em/1 var(--head-font);letter-spacing:.06em;text-transform:uppercase;color:#a31515}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;margin:0 0 1.2em}
.doc table{border-collapse:collapse;width:100%;font-size:.92em}
.doc th,.doc td{border:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}


@media (max-width:599px){
  body{font-size:17px}
}

/* ---------- Do Not Call: the online form is not open yet, so the page points to the routes below ---------- */
.dnc-note{margin:1.2em 0 1.6em;padding:14px 18px;border:1px solid var(--rule);background:#fafbfb;max-width:34rem;font-weight:700;color:var(--ink)}

/* ===== Part 2: Pixel Trim ===== */
/* Option B - Pixel Trim. The same LendingTree structure dressed in Oinkbound's
   office: striped wallpaper behind a white document sheet, a teal header bar,
   pixel-font titles and section headers, gold-coin bullets, the pixel hand
   cursor, and a wainscot-and-floor footer with Peter. Body text stays a plain
   rounded sans (Nunito) on white. Helpful Links sits on the left as tabs. */
:root{--bg:#f1e3c6;--ink:#0b3f39;--text:#26322f;--muted:#5a625c;--rule:#eadfc6;--link:#0d5f55;--link-hover:#083c36;
  --body-font:'Nunito Text',system-ui,-apple-system,'Segoe UI',sans-serif;--head-font:'Nunito Text',system-ui,sans-serif;
  --px:'Pixelify Sans','Nunito Text',monospace;--tiny:'Silkscreen','Nunito Text',monospace;--side-w:280px;--gap:40px;--measure:none;
  --teal:#0d5f55;--teal-dark:#083c36;--coin:#ffd23f;--pink:#ff5fa8}
body{background:#f1e3c6 repeating-linear-gradient(90deg,transparent 0 24px,#e9d8b4 24px 32px)}

.site-head{background:var(--teal);box-shadow:0 4px 0 var(--teal-dark)}
.head-in{display:flex;align-items:center;gap:18px;min-height:76px}
.head-tag{font:700 15px/1 var(--tiny);color:var(--coin);letter-spacing:.08em;text-transform:uppercase;padding-left:18px;border-left:3px solid #137a6b}
.head-btn{margin-left:auto;font:700 13px/1 var(--tiny);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dark);background:var(--coin);text-decoration:none;padding:12px 16px;
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark),0 6px 0 0 var(--teal-dark)}
.head-btn:hover{color:var(--teal-dark);background:#ffe27a}
.head-btn:active{transform:translateY(2px)}

.layout{margin-top:44px}
.sheet{background:#fff;padding:44px 52px 52px;
  box-shadow:0 -4px 0 0 var(--teal-dark),0 4px 0 0 var(--teal-dark),-4px 0 0 0 var(--teal-dark),4px 0 0 0 var(--teal-dark),8px 10px 0 0 rgba(8,60,54,.18)}
.sheet>*{max-width:46rem}
.page-title{font:700 42px/1.15 var(--px);color:var(--teal);margin:0 0 22px;letter-spacing:.01em}
.doc h2{font:700 26px/1.25 var(--px);color:var(--teal);margin-top:1.8em;padding-top:.9em;border-top:3px dashed #eadfc6}
.doc h3{font:800 19px/1.35 var(--head-font);color:var(--ink)}
.doc ul{list-style-image:var(--coin-url,none);padding-left:1.6em}
.doc ul li{padding-left:.25em}
.doc ol li::marker{font-weight:800;color:var(--teal)}

/* Helpful Links as binder tabs, left. Padding keeps the sticky panel's scroll box from clipping its pixel border. */
@media (min-width:900px){.side{padding:4px 14px 16px 4px;margin:-4px -14px 0 -4px}}
.side-title{font:700 14px/1.2 var(--tiny);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dark)}
.side-menu{background:#fbf6ea;
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark)}
.side-menu>summary{padding:16px 16px 12px}
.side ul{padding:0 8px 10px}
.side li{margin:2px 0}
.side a{display:block;padding:8px 10px 8px 12px;border-left:4px solid transparent;font:700 15px/1.35 var(--body-font);color:var(--ink)}
.side a:hover{border-left-color:var(--coin);background:#fff;text-decoration:none}
.side a[aria-current="page"]{background:var(--teal);color:#fff;border-left-color:var(--coin);text-decoration:none}

.brand-line{background:#fff8de;border-left-color:var(--coin)}
.dnc-note{background:#fbf6ea;border-color:#eadfc6}

.site-foot{margin-top:80px}
.wainscot{height:56px;background:#6fa38e;border-top:6px solid #d9c29a;
  background-image:linear-gradient(90deg,#5b8c78 2px,transparent 2px),linear-gradient(#5b8c78 2px,transparent 2px);background-size:64px 44px;background-position:12px 6px}
.floor{border-top:6px solid #8a5a33;background:repeating-linear-gradient(180deg,#d39a60 0 18px,#a8713f 18px 20px,#c98f55 20px 38px,#a8713f 38px 40px)}
.foot-in{display:flex;align-items:flex-end;gap:16px;min-height:104px;padding-bottom:18px;color:#3b2410;font:700 14px/1.4 var(--body-font)}
.foot-in span{background:rgba(255,246,224,.85);padding:4px 10px}


@media (max-width:899px){
  .layout{margin-top:20px;gap:20px}
  .sheet{padding:28px 22px 32px}
  .page-title{font-size:34px}
  .side ul{padding-bottom:8px}
}
@media (max-width:599px){
  .head-in{min-height:64px;gap:10px}
  .head-in canvas{width:142px!important;height:22px!important}
  .head-tag{display:none}
  .head-btn{font-size:11px;padding:10px 10px}
  .sheet{padding:24px 18px 28px}
  .page-title{font-size:30px}
  .doc h2{font-size:23px}
}

/* Pixelify Sans draws its fi ligature as one glyph that reads "Ane"; spell it out.
   Kept last because the font shorthand above resets font-variant-ligatures. */
.page-title,.doc h2{font-variant-ligatures:none}

/* no-JS fallback for the canvas wordmark */
.brand-text{font:700 26px/1 var(--px);color:#fff;font-variant-ligatures:none}