/* fix 4 Part 2.3: the public page /plans (app/plans-page.php, board PLANS.png). The cards and perk lists are
   assets/fix4/plans.css; this file is the page around them, scoped .f4pp-*. */
body.v3.f4pp-pg,body.v3.f4pp-pg .v3-main{background:#fff}   /* the board: white paper, so the light Standard panel reads */
.f4pp{padding-top:88px;padding-bottom:96px}
.f4pp-head{max-width:760px}
.f4pp-h1{margin:0;font:400 clamp(44px,5.4vw,76px)/1.02 var(--display,'Outfit',system-ui,sans-serif);letter-spacing:-.045em;color:var(--ink,#0E1417);text-wrap:balance}
.f4pp-lead{margin:22px 0 0;max-width:620px;font:400 19px/1.55 var(--text,'Instrument Sans',system-ui,sans-serif);color:var(--ink-2,#3B4750)}
.f4pp-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:72px;align-items:stretch}
.f4pp-plan{display:flex;flex-direction:column;min-width:0}
.f4pp-plan .f4p-card{max-width:none}
.f4pp-ph{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:30px 0 18px}
.f4pp-ph h2{margin:0;font:400 34px/1.1 var(--display,'Outfit',system-ui,sans-serif);letter-spacing:-.02em;color:inherit}
.f4pp-meta{font:400 15px/1.4 var(--text,'Instrument Sans',system-ui,sans-serif);color:var(--sub,#5C6B75);white-space:nowrap}
.f4p-panel--pro .f4pp-meta{color:rgba(255,255,255,.7)}
.f4pp-both{margin-top:56px;padding-top:28px;border-top:1px solid var(--line,#E3E8EB)}
.f4pp-new{margin:28px 0 0;font:500 17px/1.5 var(--text,'Instrument Sans',system-ui,sans-serif);color:var(--ink,#0E1417)}
.f4pp-new span{display:block;margin-top:4px;font-weight:400;font-size:14px;color:var(--sub,#5C6B75)}
.f4pp-sec{margin-top:88px;max-width:1000px}
.f4pp-sec h2{margin:0;font:400 clamp(30px,3.2vw,40px)/1.1 var(--display,'Outfit',system-ui,sans-serif);letter-spacing:-.03em;color:var(--ink,#0E1417)}
.f4pp-sub{margin:14px 0 0;max-width:680px;font:400 17px/1.55 var(--text,'Instrument Sans',system-ui,sans-serif);color:var(--ink-2,#3B4750)}
.f4pp-bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0 0;padding:24px 28px;border:1px solid var(--line,#E3E8EB);border-radius:24px;background:#fff;list-style:none}
.f4pp-bands li{display:flex;flex-direction:column;gap:4px;min-width:0}
.f4pp-bands span{font:400 14px/1.35 var(--text,'Instrument Sans',system-ui,sans-serif);color:var(--sub,#5C6B75)}
.f4pp-bands b{font:400 26px/1.2 var(--display,'Outfit',system-ui,sans-serif);color:var(--ink,#0E1417)}
.f4pp-notes{display:grid;gap:8px;margin:20px 0 0;padding:0;list-style:none;font:400 15px/1.55 var(--text,'Instrument Sans',system-ui,sans-serif);color:var(--ink-2,#3B4750)}
.f4pp-notes .f4p-pro{font-weight:600;margin-right:-.1em}   /* the padding that keeps the "o" whole, not a gap before the colon */
.f4pp-link{display:inline-block;margin-top:18px;border-radius:4px;font:600 15px/1.4 var(--text,'Instrument Sans',system-ui,sans-serif);color:var(--ink,#0E1417);text-decoration:none}
.f4pp-link:hover{text-decoration:underline;text-underline-offset:3px}
.f4pp-tb{width:100%;margin-top:28px;border-collapse:separate;border-spacing:0;border:1px solid var(--line,#E3E8EB);border-radius:24px;background:#fff;overflow:hidden;
  font:400 16px/1.45 var(--text,'Instrument Sans',system-ui,sans-serif)}
.f4pp-tb th,.f4pp-tb td{padding:16px 24px;text-align:left;vertical-align:top}
.f4pp-tb thead th{font-size:14px;font-weight:500;color:var(--sub,#5C6B75);background:#F7F8FA}
.f4pp-tb tbody th{font-weight:500;color:var(--ink,#0E1417)}
.f4pp-tb tbody td{color:var(--ink-2,#3B4750)}
.f4pp-tb tbody tr>*{border-top:1px solid var(--line,#E8ECEF)}
.f4pp-cta{margin-top:64px}
.f4pp-cta a{display:inline-flex;align-items:center;height:52px;padding:0 24px;border-radius:999px;background:var(--ink,#0E1417);color:#fff;text-decoration:none;font:600 16px/1 var(--text,'Instrument Sans',system-ui,sans-serif)}
.f4pp-cta a:hover{background:#000}
.f4pp-link:focus-visible,.f4pp-cta a:focus-visible{outline:2px solid var(--ink,#0E1417);outline-offset:3px}
@media (max-width:900px){
  .f4pp{padding-top:32px;padding-bottom:64px}
  .f4pp-plans{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px}
  .f4pp-plan.f4p-panel{padding:16px 16px 24px;border-radius:24px}
  .f4pp-ph{margin:22px 4px 14px}
  .f4pp-ph h2{font-size:28px}
  .f4pp-plan .f4p-perks{padding:0 4px}
  .f4pp-lead{font-size:17px}
  .f4pp-sec{margin-top:56px}
  .f4pp-bands{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px}
  .f4pp-tb th,.f4pp-tb td{padding:12px 14px;font-size:15px}
}