/* FillMyPIP shared design system (Paper & Ink). Used by all content pages.
   The homepage (app.html) keeps its own inline copy of these tokens. */
:root{
  --paper:#f4f6f2; --paper2:#ecefe8; --card:#FFFFFF;
  --ink:#1a231d; --ink2:#41504a; --muted:#5c6a60;
  --line:#dce3dc; --line2:#c8d2c8;
  --pen:#1b4d3e; --pen-soft:#e4ede7;
  --stamp:#1b4d3e; --stamp-soft:#e4ede7;
  --amber:#B4791A;
  --radius:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
a{color:var(--pen);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
img{max-width:100%}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--pen);color:#fff;font-weight:600;font-size:15px;padding:13px 22px;border-radius:10px;border:none;cursor:pointer;transition:transform .12s,filter .12s;font-family:inherit;text-align:center;justify-content:center;text-decoration:none}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px);text-decoration:none}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line2)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--pen);outline-offset:2px}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pen)}

/* NAV */
nav{position:sticky;top:0;z-index:40;background:rgba(253,251,247,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:20px;letter-spacing:-.045em;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:30px;border-radius:8px;background:var(--pen);color:#fff;display:grid;place-items:center;font-size:17px;transform:rotate(-4deg)}
.logo b{color:var(--pen);font-weight:700}
.navlinks{display:flex;gap:26px;font-size:15px;color:var(--ink2);font-weight:500}
.navlinks a{color:var(--ink2)}
.navlinks a:hover{color:var(--pen);text-decoration:none}
.nav-cta{padding:9px 16px;font-size:14px}

/* PAGE HERO */
.phero{padding:56px 0 20px}
.phero.center{text-align:center}
.breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);margin-bottom:16px}
.breadcrumb a{color:var(--muted)}
h1{font-size:44px;line-height:1.06;letter-spacing:-.03em;font-weight:700;margin:8px 0 16px}
.phero .lead{font-size:19px;color:var(--ink2);max-width:620px;margin-bottom:8px}
.phero.center .lead{margin-left:auto;margin-right:auto}

/* SECTIONS */
section.blk{padding:56px 0}
.kick{text-align:center;margin-bottom:40px}
.kick h2{font-size:32px;letter-spacing:-.025em;font-weight:700;margin:10px 0 8px}
.kick p{color:var(--ink2);font-size:17px;max-width:600px;margin:0 auto}
.tint{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* PROSE (articles / legal / content) */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:26px;letter-spacing:-.02em;font-weight:700;margin:34px 0 12px}
.prose h3{font-size:19px;font-weight:600;margin:24px 0 8px}
.prose p{font-size:16.5px;color:var(--ink2);margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px 22px;color:var(--ink2);font-size:16.5px}
.prose li{margin:0 0 8px}
.prose strong{color:var(--ink)}
.prose blockquote{border-left:3px solid var(--pen);background:var(--pen-soft);padding:14px 18px;border-radius:0 10px 10px 0;margin:0 0 18px;color:var(--ink2)}
.prose .updated{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);margin-bottom:24px}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.step .n{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:#fff;background:var(--pen);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;margin-bottom:16px}
.step h3{font-size:19px;font-weight:600;margin-bottom:7px}
.step p{color:var(--ink2);font-size:15px}

/* HUB CARDS */
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hubcard{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:24px;display:block;transition:transform .12s,box-shadow .12s}
.hubcard:hover{transform:translateY(-2px);box-shadow:0 16px 40px -28px rgba(39,29,10,.4);text-decoration:none}
.hubcard .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.hubcard h3{font-size:20px;font-weight:700;margin:8px 0 6px;color:var(--ink)}
.hubcard p{color:var(--ink2);font-size:14.5px;margin-bottom:10px}
.hubcard .go{font-size:14px;font-weight:600;color:var(--pen)}

/* FORM REPLICA (shared with app.html renders) */
.rsheet{background:var(--card);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px -34px rgba(39,29,10,.34);max-width:680px;margin:0 auto 16px}
.rsheet-bar{background:var(--ink);color:#F3EFE6;font-size:12.5px;font-weight:500;padding:11px 18px;display:flex;justify-content:space-between;gap:10px}
.rsheet-bar .mono{color:#B9B1A0;font-size:11px}
.rsheet-body{padding:20px 22px 24px 40px;position:relative}
.rsheet-body:before{content:"";position:absolute;left:14px;top:6px;bottom:6px;width:1px;background:#F1D9D9}
.rqnum{font-weight:700;font-size:16px;margin-bottom:2px}
.aisec{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-top:12px;background:var(--card)}
.aisec.accent{border-color:#cdd8f2;background:var(--pen-soft)}
.aisec.green{border-color:#C9E6D2;background:var(--stamp-soft)}
.aisec.amber{border-color:#EAD8AE;background:#FBF4E4}
.aisec-t{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:7px;color:var(--ink)}
.aisec p{font-size:14px;color:var(--ink2);line-height:1.6}
.aisec ul{margin:2px 0 0 18px;font-size:13.5px;color:var(--ink2);line-height:1.55}
.aisec li{margin-bottom:5px}
.aisec-note{font-size:12px;color:var(--muted);margin-bottom:7px}
.qa-block{white-space:pre-wrap;font-size:13.5px;line-height:1.65;color:var(--ink2)}
.rqask{font-size:13.5px;font-weight:600;color:var(--ink);margin:2px 0 9px;line-height:1.45}
.crossnote{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;color:var(--muted)}
.rqsub{font-size:13px;color:var(--ink2);margin:10px 0 12px;line-height:1.5}
.yesbox{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--stamp);background:var(--stamp-soft);border:1px solid #C9E6D2;border-radius:7px;padding:5px 10px;margin-bottom:14px}
.nobox{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--muted);background:var(--paper2);border:1px solid var(--line);border-radius:7px;padding:5px 10px}
/* Honest "less affected" cards sit slightly back from the two full answers. Was only
   declared inline in app.html, so it never applied on the condition pages. */
.nocard{opacity:.92}
/* Ruled lines are drawn as a real underline, NOT a repeating background gradient.
   The gradient version kept striking through the text: even with the period set exactly
   to the line-height, the 1px rule and the text baseline snap to device pixels
   independently, so on a scaled or Retina display some lines landed inside the glyphs
   and others below them. An underline is positioned by the browser from each line's own
   baseline, so it can never drift out of phase. */
.ransw{font-size:14.5px;color:#243b8f;line-height:30px;text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:6px;white-space:pre-wrap}
.pill{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:var(--stamp-soft);color:var(--stamp);font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:7px;border:1px solid #C9E6D2}
.rnote{font-size:12.5px;color:var(--muted);margin-top:8px;font-style:italic;display:block}
.ar1-field{margin-bottom:14px}
.ar1-lab{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink2);font-weight:600;margin-bottom:6px}

/* GUIDANCE TIP CARDS (example pages: 2 full answers + short useful tips + paywall) */
.tipgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:680px;margin:0 auto}
.tipcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.tipcard .lq{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}
.tipcard h4{font-size:14.5px;font-weight:600;margin:3px 0 7px}
.tipcard .tip-lab{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--pen);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;display:block}
.tipcard p{font-size:13px;color:var(--ink2);line-height:1.62}
@media(max-width:560px){.tipgrid{grid-template-columns:1fr}}

/* LOCKED PREVIEW CARDS + PAYWALL (homepage free-preview mechanic) */
.locked-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:680px;margin:0 auto}
.lcard{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:16px 18px;position:relative;overflow:hidden;min-height:132px}
.lcard .lq{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}
.lcard h4{font-size:14.5px;font-weight:600;margin:4px 0 9px}
.lcard .blur{filter:blur(4.5px);user-select:none;pointer-events:none;color:var(--pen);font-size:13px;line-height:1.7}
.lockoverlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(253,251,247,.42)}
.lockbox{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink2);font-size:12px;font-weight:600}
.lockbox .ic{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:16px}
.paywall{max-width:680px;margin:26px auto 0;background:var(--card);border:2px solid var(--pen);border-radius:16px;padding:26px;text-align:center}
.paywall h3{font-size:22px;font-weight:700;margin-bottom:6px}
.paywall p{color:var(--ink2);font-size:15px;max-width:500px;margin:0 auto 18px}
.paywall .pw-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.locked-grid{grid-template-columns:1fr}}

/* AUTHOR / E-E-A-T */
.author{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;max-width:760px;margin:32px auto 0}
.author .av{width:52px;height:52px;border-radius:50%;background:var(--pen);color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;flex:none}
.author .who{font-weight:700;font-size:15px}
.author .role{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.author p{font-size:14px;color:var(--ink2)}

/* CTA BAND */
.ctaband{background:var(--card);border:2px solid var(--pen);border-radius:16px;padding:28px;text-align:center;max-width:720px;margin:0 auto}
.ctaband h3{font-size:23px;font-weight:700;margin-bottom:6px}
.ctaband p{color:var(--ink2);font-size:15px;max-width:520px;margin:0 auto 18px}

/* PRICING (compact, for product pages) */
.price{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:800px;margin:0 auto}
.pcard{background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:30px 28px;position:relative}
.pcard.feat{border:2px solid var(--pen)}
.badge{position:absolute;top:-12px;left:28px;background:var(--pen);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.05em;padding:5px 12px;border-radius:7px}
.pcard .pt{font-size:13px;font-family:'IBM Plex Mono',monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.pcard h3{font-size:23px;font-weight:700;margin:4px 0 2px}
.pcard .cost{font-size:40px;font-weight:700;letter-spacing:-.03em;margin:12px 0 2px}
.pcard .cost small{font-size:15px;font-weight:500;color:var(--muted)}
.pcard ul{list-style:none;margin:18px 0 22px}
.pcard li{font-size:14.5px;color:var(--ink2);padding:6px 0 6px 26px;position:relative}
.pcard li:before{content:"";position:absolute;left:0;top:11px;width:14px;height:8px;border-left:2px solid var(--stamp);border-bottom:2px solid var(--stamp);transform:rotate(-45deg)}
.pcard .btn{width:100%;justify-content:center}

/* FAQ */
.faqwrap{max-width:760px;margin:0 auto}
.qa{border-bottom:1px solid var(--line);padding:20px 0}
.qa h3{font-size:17px;font-weight:600;margin-bottom:6px}
.qa p{color:var(--ink2);font-size:15px}

/* TOOL (answer-checker) */
.tool{max-width:680px;margin:0 auto}
.fin{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line2);border-radius:9px;padding:10px 12px;outline:none}
.fin:focus{border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
textarea.fin{resize:vertical;line-height:1.55;min-height:120px}
.flab{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin:12px 0 5px}
.feedback{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:20px 22px;margin-top:18px}
.fb-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink2)}
.fb-item:first-child{border-top:none}
.fb-item .ck{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff}
.fb-yes .ck{background:var(--stamp)}
.fb-no .ck{background:var(--amber)}

/* TABLE (practice sheet) */
.tblwrap{overflow-x:auto;max-width:760px;margin:0 auto}
table.sheet{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
table.sheet th,table.sheet td{border:1px solid var(--line2);padding:10px 12px;text-align:left;vertical-align:top}
table.sheet th{background:var(--paper2);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.03em;color:var(--ink2)}

/* NOTE / DISCLAIMER BOX */
.notebox{background:var(--pen-soft);border:1px solid #cdd8f2;border-radius:10px;padding:14px 16px;font-size:14px;color:var(--ink2);max-width:760px;margin:0 auto}
.warnbox{background:#FBF4E4;border:1px solid #EAD8AE;border-radius:10px;padding:14px 16px;font-size:14px;color:#7A5A18;max-width:760px;margin:0 auto}

/* TRUST STRIP */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper2)}
.trustrow{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;padding:16px 0;font-size:13.5px;color:var(--ink2);font-weight:500}
.trustrow .i{color:var(--pen)}

/* FOOTER */
footer.site{background:var(--ink);color:#CFC8BA;font-size:13px;padding:34px 0;text-align:center;line-height:1.9}
footer.site a{color:#CFC8BA;text-decoration:underline;text-underline-offset:2px}
footer.site .fnav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:6px 0 14px;font-size:13px}
footer.site .fl{color:#8C8474;font-family:'IBM Plex Mono',monospace;font-size:11.5px}
footer.site b{color:#F3EFE6;font-weight:600}

@media(max-width:860px){
  h1{font-size:34px}
  .steps,.price,.hubgrid{grid-template-columns:1fr}
  .navlinks{display:none}
}