/* ============================================================
   FontFuel — per-font page styles (loaded after styles.css)
   Dark hero → white specimen/about → dark footer.
   ============================================================ */

.fp-hero{position:relative;min-height:62vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(140px,18vh,200px) 24px 70px;overflow:hidden;}
.fp-hero .roofline{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:176%;height:clamp(180px,30vh,360px);pointer-events:none;z-index:0;}
.fp-hero .soffit{position:absolute;left:50%;top:20%;transform:translate(-50%,-50%);
  width:128vw;height:200px;pointer-events:none;z-index:0;
  background:radial-gradient(58% 100% at 50% 50%, rgba(255,255,255,.9), rgba(214,232,255,.3) 42%, transparent 72%);
  filter:blur(24px);opacity:.5;mix-blend-mode:screen;}
.fp-hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.1rem;max-width:920px;}

.breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600;}
.breadcrumb a{color:var(--ink-dim);transition:.2s;}
.breadcrumb a:hover{color:var(--charge-soft);}
.breadcrumb .sep{opacity:.5;}

.fp-cat{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--charge-soft);font-weight:600;}
.fp-name{color:#fff;line-height:.98;word-break:break-word;
  font-size:clamp(3rem,9vw,6.4rem);margin:.1rem 0;
  filter:drop-shadow(0 8px 30px rgba(6,147,207,.25));}
.fp-name.allcaps{font-size:clamp(2.4rem,7vw,5rem);letter-spacing:.02em;}
.fp-tagline{font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--ink);font-weight:500;}
.fp-meta{display:flex;gap:1.4rem;align-items:center;justify-content:center;flex-wrap:wrap;
  color:var(--ink-dim);font-size:.9rem;font-weight:600;letter-spacing:.04em;}
.fp-meta .price{color:#fff;}
.fp-meta .price b{color:var(--volt-bright);}
.fp-cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem;}

/* leaf dingbat hero */
.fp-name.dingbat{font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:.1em;}

/* ---------- light sections ---------- */
.sec-light{position:relative;background:#eef2f7;padding:84px 0;}
.sec-light .section-tag{display:flex;align-items:center;gap:.7rem;justify-content:center;margin-bottom:.5rem;}
.sec-light .section-tag::before,.sec-light .section-tag::after{content:"";height:1px;width:48px;background:linear-gradient(90deg,transparent,rgba(6,147,207,.45));}
.sec-light .section-tag::after{background:linear-gradient(90deg,rgba(6,147,207,.45),transparent);}
.sec-light .eyebrow{font-weight:600;letter-spacing:.32em;text-transform:uppercase;font-size:.72rem;color:var(--volt);}
.sec-light h2{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:700;text-align:center;color:#0f1622;margin:.1rem 0 .4rem;letter-spacing:-.01em;}
.sec-light .lead{text-align:center;color:#55617a;max-width:640px;margin:0 auto 40px;font-size:1.04rem;}
.sec-light.alt{background:#e6ebf3;}

/* specimen card */
.fp-card{max-width:980px;margin:0 auto;background:#fff;border:1px solid #dbe3ef;border-radius:18px;
  padding:34px 30px;box-shadow:0 22px 54px -34px rgba(20,40,80,.4);}
.charset-row{margin-bottom:22px;}
.charset-row:last-child{margin-bottom:0;}
.charset-row .lbl{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#8a93a6;font-weight:600;margin-bottom:8px;}
.charset-row .glyphs{color:#11151f;line-height:1.25;word-break:break-word;font-size:1.9rem;}
.charset-row .glyphs.nums{color:var(--volt);font-size:1.6rem;}
.style-row{display:flex;align-items:baseline;gap:18px;padding:12px 0;border-top:1px solid #eef2f8;flex-wrap:wrap;}
.style-row:first-of-type{border-top:none;}
.style-row .sn{flex:0 0 90px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#8a93a6;font-weight:700;}
.style-row .sp{color:#11151f;font-size:2rem;line-height:1.1;word-break:break-word;}
.size-row{color:#11151f;line-height:1.15;margin:6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.leaf-full{display:grid;grid-template-columns:repeat(13,1fr);gap:10px;}
.leaf-full span{font-family:"PSI Leaves";font-size:1.7rem;text-align:center;color:var(--volt);}
@media(max-width:680px){.leaf-full{grid-template-columns:repeat(8,1fr);}}

/* light tester */
.fp-tester{max-width:900px;margin:0 auto;background:#fff;border:1px solid #dbe3ef;border-radius:18px;overflow:hidden;
  box-shadow:0 22px 54px -34px rgba(20,40,80,.4);}
.fp-tester .console{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:18px 20px;
  background:linear-gradient(180deg,#f7f9fd,#eef2f8);border-bottom:1px solid #e2e8f2;}
.fp-tester .tinput{flex:1 1 240px;display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid #d4dcea;border-radius:10px;padding:.55rem .8rem;}
.fp-tester .tinput:focus-within{border-color:rgba(6,147,207,.5);box-shadow:0 0 0 3px rgba(6,147,207,.12);}
.fp-tester .tinput .ic{color:var(--volt);}
.fp-tester .tinput input{flex:1;background:none;border:none;outline:none;color:#0f1622;font-family:var(--ui);font-size:1rem;}
.fp-tester .sizectl{display:flex;align-items:center;gap:.6rem;color:#55617a;font-size:.78rem;font-weight:600;}
.fp-tester .sizectl input[type=range]{-webkit-appearance:none;appearance:none;width:130px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--volt),var(--volt-bright));outline:none;}
.fp-tester .sizectl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 1px #cdd6e4,0 0 10px rgba(6,147,207,.6);}
.fp-tester .stage{padding:46px 26px;min-height:200px;display:flex;align-items:center;justify-content:center;text-align:center;}
.fp-tester .stage .out{color:#11151f;line-height:1.05;word-break:break-word;}

/* light-section buttons */
.sec-light .btn:not(.btn-hot){color:#0f1622;border-color:#d4dcea;background:#f4f7fb;}
.sec-light .btn:not(.btn-hot):hover{border-color:rgba(6,147,207,.45);background:#eef4fb;}
.sec-light .btn-hot{color:#fff;border-color:transparent;background:linear-gradient(180deg,#23ace4,#0589c4);
  box-shadow:0 10px 24px -10px rgba(6,147,207,.7), inset 0 1px 0 rgba(255,255,255,.28);}

/* use-case chips */
.usecases{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:760px;margin:18px auto 0;}
.usecases span{font-size:.84rem;color:#41506b;background:#fff;border:1px solid #dbe3ef;border-radius:999px;padding:.4rem .9rem;font-weight:500;}

/* about prose */
.fp-about{max-width:760px;margin:0 auto;}
.fp-about p{color:#3a455c;line-height:1.75;font-size:1.08rem;margin:0 0 1.1rem;}
.fp-about p b{color:#11151f;}

/* related fonts */
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:980px;margin:0 auto;}
.related-card{display:block;background:#fff;border:1px solid #dbe3ef;border-radius:14px;padding:22px;transition:.25s;}
.related-card:hover{border-color:rgba(6,147,207,.45);transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(20,40,80,.45);}
.related-card .rname{font-weight:700;color:#0f1622;font-size:1.05rem;margin-bottom:4px;}
.related-card .rcat{color:#8a93a6;font-size:.8rem;}
.related-card .rspec{margin-top:14px;font-size:1.9rem;color:#11151f;line-height:1;word-break:break-word;}

/* catalog grid (/fonts/) */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;max-width:1100px;margin:0 auto;}
.cat-card{display:flex;flex-direction:column;background:#fff;border:1px solid #dbe3ef;border-radius:16px;overflow:hidden;transition:.25s;min-height:230px;}
.cat-card:hover{border-color:rgba(6,147,207,.45);transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(20,40,80,.5);}
.cat-spec{flex:1;display:flex;align-items:center;justify-content:center;padding:34px 22px;color:#11151f;
  font-size:clamp(2rem,4vw,2.9rem);line-height:1;text-align:center;word-break:break-word;}
.cat-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-top:1px solid #eef2f8;background:#f8fafd;}
.cat-name{font-weight:700;color:#0f1622;font-size:1.05rem;}
.cat-cat{color:#8a93a6;font-size:.76rem;margin-top:2px;}
.cat-price{font-weight:700;color:var(--volt);font-size:.9rem;white-space:nowrap;}
.cat-price.soon{color:#8a93a6;}

/* soon badge */
.soon-pill{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#0a0e1a;background:var(--volt-bright);padding:.3rem .7rem;border-radius:6px;box-shadow:0 0 18px -4px var(--volt-bright);}