/* freepage.css — หน้า BK Driver Slip / BK Bill Design · สร้างโดย notes/free-programs/make_free_pages.py อย่าแก้มือ · คลาสขึ้นต้น fg- */
:root{--fg-ink:#0b1f44;--fg-mut:#4d5f7e;--fg-line:#dbe4f2;--fg-pri:#1d4ed8;--fg-free:#15803d}   /* ใช้ร่วมกับหน้า Remote LAN / Label (ราคา FREE) */
.fg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fg-hero{background:linear-gradient(135deg,#f3f8ff 0%,#e3eefc 60%,#f0f4ff 100%);padding:44px 0 50px;border-bottom:1px solid var(--fg-line)}
.fg-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:center}
.fg-kicker{display:inline-block;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid #cfdcf3;color:var(--fg-pri);font-weight:700;font-size:14px}
.fg-hero h1{margin:16px 0 14px;font-size:clamp(34px,4vw,54px);line-height:1.15;font-weight:800;color:var(--fg-ink)}
.fg-hero h1 span{display:block;margin-top:8px;font-size:clamp(18px,1.7vw,24px);line-height:1.45;font-weight:700;color:var(--fg-pri)}
.fg-price{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0 0 14px;padding:14px 18px;border-radius:18px;background:#fff;border:1px solid var(--fg-line);box-shadow:0 18px 36px -26px rgba(15,40,90,.5)}
.fg-price p{margin:0}
.fg-old{font-size:24px;font-weight:700;color:#7a879c}.fg-old s{text-decoration-thickness:3px;text-decoration-color:#e11d48}
.fg-free{display:flex;align-items:baseline;gap:10px}.fg-free b{font-size:56px;line-height:1;font-weight:900;letter-spacing:.5px;color:var(--fg-free)}
.fg-free span{font-size:20px;font-weight:800;color:var(--fg-free)}
.fg-pnote{flex:1 1 100%;font-size:14px;color:var(--fg-mut)}
.fg-lede{margin:0 0 18px;font-size:17px;line-height:1.75;color:#2c3e5c}
.fg-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.fg-dl{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:14px;font-weight:800;font-size:17px}
.fg-dl svg{width:22px;height:22px;flex:0 0 auto}
.fg-dl-off{background:#e8eef9;color:#52668a;border:2px dashed #b3c4e4;cursor:not-allowed}
.fg-lnk{font-weight:700;color:var(--fg-pri)}
.fg-dlnote{margin:10px 0 0;font-size:13.5px;color:var(--fg-mut)}
.fg-pgfree{margin:0 0 14px;max-width:560px}.fg-pgfree .fg-price{margin:0 0 12px}
.fg-price p.fg-old{color:#7a879c}.fg-price p.fg-pnote{color:var(--fg-mut)}.fg-price p.fg-free{color:var(--fg-free)}   /* ชนะกฎ p ของ hero สีเข้ม (หน้า Remote/Label) */
.fg-pgfree .fg-dlnote{color:rgba(255,255,255,.86)}.fg-pgfree .fg-lnk{color:#cfe0ff}   /* การ์ดราคาอยู่ใน hero สีเข้มของหน้า Remote LAN / Label */
.rm-price-l .fg-price,.bl-pricebox .fg-price{margin:14px 0 12px}
.fg-hero-pic{margin:0;min-width:0}
.fg-frame{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--fg-line);box-shadow:0 26px 54px -28px rgba(7,26,69,.55)}
.fg-frame img{display:block;width:100%;height:auto}
.fg-hero-pic figcaption,.fg-shot figcaption{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--fg-mut)}
.fg-what p{margin:0 0 12px;max-width:900px;font-size:16.5px;line-height:1.85;color:#2c3e5c}
.fg-probs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fg-prob{padding:18px;border-radius:16px;background:#fff;border:1px solid var(--fg-line)}.fg-prob h3{margin:0 0 8px;font-size:18px;color:var(--fg-ink)}.fg-prob p{margin:0;font-size:15px;line-height:1.7;color:#3d5170}
.fg-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fg-feat{padding:18px;border-radius:16px;background:#fff;border:1px solid var(--fg-line)}
.fg-fi{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#e6efff;color:var(--fg-pri);margin-bottom:10px}.fg-fi svg{width:24px;height:24px}
.fg-feat b{display:block;font-size:17px;line-height:1.35;color:var(--fg-ink)}.fg-feat p{margin:6px 0 0;font-size:14.5px;line-height:1.65;color:#3d5170}
.fg-tablewrap{overflow-x:auto;border:1px solid var(--fg-line);border-radius:14px;background:#fff}
.fg-table{width:100%;border-collapse:collapse;font-size:15.5px}.fg-table th,.fg-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--fg-line);vertical-align:top}
.fg-table th{background:#eef3fb;color:var(--fg-mut);font-size:14px}.fg-table tr:last-child td{border-bottom:0}
.fg-note{margin:12px 0 0;font-size:14.5px;line-height:1.7;color:var(--fg-mut)}
.fg-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:s}
.fg-steps li{padding:16px;border-radius:16px;background:#fff;border:1px solid var(--fg-line)}
.fg-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fg-pri);color:#fff;font-weight:800;margin-bottom:8px}
.fg-steps b{display:block;font-size:16.5px;color:var(--fg-ink)}.fg-steps p{margin:6px 0 0;font-size:14.5px;line-height:1.65;color:#3d5170}
.fg-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.fg-shot{margin:0;min-width:0}
.fg-warn{padding:20px 22px;border-radius:16px;background:#fff8e6;border:1px solid #f3dca2}.fg-warn h2{margin-top:0}.fg-warn ul{margin:0;padding-left:20px}.fg-warn li{margin:6px 0;font-size:15.5px;line-height:1.7;color:#5b4713}
.fg-faq{margin:0 0 10px;border:1px solid var(--fg-line);border-radius:14px;background:#fff}.fg-faq summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:16.5px;color:var(--fg-ink)}
.fg-faq p{margin:0;padding:0 18px 16px;font-size:15.5px;line-height:1.8;color:#2c3e5c}
.fg-xls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fg-xl{display:block;padding:16px;border-radius:14px;background:#fff;border:1px solid var(--fg-line);text-decoration:none}.fg-xl b{display:block;color:var(--fg-pri);font-size:16.5px}.fg-xl span{display:block;margin-top:4px;font-size:14px;color:var(--fg-mut)}
.fg-xl:hover{border-color:var(--fg-pri)}
@media (max-width:1180px){.fg-feats{grid-template-columns:repeat(2,minmax(0,1fr))}.fg-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.fg-hero-in{grid-template-columns:1fr}}
@media (max-width:820px){.fg-probs,.fg-xls,.fg-shots{grid-template-columns:1fr}}
@media (max-width:600px){.fg-hero{padding:28px 0 34px}.fg-feats,.fg-steps{grid-template-columns:1fr}.fg-free b{font-size:52px}.fg-old{font-size:22px}.fg-dl{width:100%}.fg-price{padding:12px 14px}}