/* fix 4 Part 2.2: the plan cards and the perk lists (app/plans.php plan_card(), plan_perks(), plan_both_row(); board
   PLANS.png). Loaded on every page by fix3_head(), so it stays small: only .f4p-* rules, nothing global. */

/* ---------- the card: ratio 1.586:1, radius 22, everything inside scales with its width ---------- */
.f4p-card{position:relative;display:block;flex:none;width:var(--pc-w,330px);max-width:100%;aspect-ratio:1.586/1;border-radius:22px;overflow:hidden;isolation:isolate;
  container-type:inline-size;background:#2E4A5E;color:#fff;contain:paint}
.f4p-card--fluid{width:100%;max-width:var(--pc-w,330px)}
.f4p-card--pro{background:#0E1215}
.f4p-art,.f4p-bg,.f4p-grain,.f4p-sheen{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.f4p-bg{object-fit:cover;-webkit-user-drag:none;user-select:none}
.f4p-card--pro .f4p-bg{opacity:.85;-webkit-mask-image:radial-gradient(130% 130% at 100% 100%,#000 15%,transparent 72%);mask-image:radial-gradient(130% 130% at 100% 100%,#000 15%,transparent 72%)}
/* the universal tile, 1 tile pixel per device pixel (app/visual.php sets --grain-src/--grain-size), under the logo and the name */
.f4p-grain{background:var(--grain-src,url(/assets/grain/grain-256.png)) repeat;background-size:var(--grain-size,128px) var(--grain-size,128px);mix-blend-mode:soft-light}
.f4p-sheen{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 46%,transparent 60%)}
.f4p-card--pro .f4p-sheen{background:linear-gradient(115deg,transparent 30%,rgba(255,230,200,.10) 46%,transparent 60%)}
/* the edge sits above everything (an inset shadow on the card itself would paint under the art) */
.f4p-art::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.14)}
.f4p-card--pro .f4p-art::after{box-shadow:inset 0 1px 0 rgba(255,214,170,.35),inset 0 0 0 1px rgba(255,255,255,.08)}
.f4p-art{border-radius:inherit}
/* the white logo (its glow included): height 10.5% of the card's width */
.f4p-logo{position:absolute;z-index:2;left:4.6%;top:4.4%;height:auto;width:21.93%;aspect-ratio:470/225;color:#fff;overflow:visible}
.f4p-name{position:absolute;z-index:2;left:6.8%;bottom:5.6%;margin:0;color:#fff;white-space:nowrap;
  font:400 calc(var(--pc-w,330px) * .10)/1 var(--display,'Outfit',system-ui,sans-serif);font-size:10cqi;letter-spacing:-.02em}
.f4p-card--pro .f4p-name{left:6.4%;bottom:5%;font-weight:500;font-size:calc(var(--pc-w,330px) * .20);font-size:20cqi;letter-spacing:-.05em;line-height:.92}

/* ---------- the gradient "Pro": inline-block + right/bottom padding, so the "o" is never cut ---------- */
.f4p-pro{display:inline-block;padding:0 .1em .04em 0;background:linear-gradient(180deg,#FFE2B8,#F2A65A 55%,#D9692A);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media (forced-colors:active){.f4p-pro{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}

/* ---------- perk lists: Standard light with ink ticks, Pro dark with ember ticks; radius 28, padding 28 ---------- */
.f4p-tick{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#E6EAEE;color:#0E1417}
.f4p-tick svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f4p-perks{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.f4p-perks li{display:flex;align-items:flex-start;gap:14px;font:400 16px/22px var(--text,'Instrument Sans',system-ui,sans-serif)}
.f4p-perks li>.f4p-tick{margin-top:0}
.f4p-perks--standard li{color:#3B4750}
.f4p-perks--pro li{color:rgba(255,255,255,.88)}
.f4p-perks--pro .f4p-tick{background:rgba(242,166,90,.18);color:#F2A65A}
.f4p-panel{border-radius:28px;padding:28px}
.f4p-panel--standard{background:#F7F8FA;color:#0E1417}
.f4p-panel--pro{background:#14181B;color:#fff}

/* ---------- "On both plans" ---------- */
.f4p-both{display:flex;align-items:center;gap:20px 40px}
.f4p-both-h{flex:none;font:600 16px/1.4 var(--text,'Instrument Sans',system-ui,sans-serif);color:#0E1417}
.f4p-both ul{display:flex;flex:1;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;margin:0;padding:0;list-style:none}
.f4p-both li{display:flex;align-items:flex-start;gap:12px;font:400 16px/22px var(--text,'Instrument Sans',system-ui,sans-serif);color:#3B4750}
@media (max-width:900px){
  .f4p-both{flex-direction:column;align-items:flex-start;gap:14px}
  .f4p-both ul{flex-direction:column;gap:12px}
}

.f4p-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}