/* PEBL base: tokens, type, layout, topbar, hero, screens */
:root{
  --navy:#00274c; --navy2:#0b3a6b; --navy3:#123f72; --maize:#ffcb05; --maize2:#ffdd57;
  --paper:#f4f1e8; --paper2:#faf8f2; --card:#ffffff; --line:#e3dccb; --line2:#eee9dc;
  --ink:#0b1c2c; --body:#3d4a57; --mut:#6b7784; --mut2:#8a939c;
  --disc:#313338; --disc-side:#2b2d31; --disc-rail:#1e1f22; --disc-top:#383a40;
  --gs-green:#1f7a4d; --gs-green2:#137333; --gs-blue:#1a73e8;
  --red:#b4423a;
  --shadow:0 20px 50px rgba(9,25,45,.22);
  --r:14px;
  --maxw:1420px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:#e7eaee;-webkit-font-smoothing:antialiased;
  line-height:1.5;padding-bottom:0;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
a{color:inherit}

/* ================= TOP BAR ================= */
.topbar{
  position:sticky;top:0;z-index:60;background:var(--navy);color:#fff;
  box-shadow:0 6px 22px rgba(0,20,40,.28);
}
.tb-in{max-width:var(--maxw);margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .mono{width:38px;height:38px;border-radius:10px;background:var(--maize);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-family:"Fraunces",Georgia,serif;
  font-weight:900;font-size:20px;flex:none}
.brand b{font-size:15px;font-weight:800;letter-spacing:.06em;line-height:1.1;display:block}
.brand small{font-size:9.5px;letter-spacing:.2em;color:#9db4cf;font-weight:600;text-transform:uppercase}
.tabs{display:flex;gap:4px;margin-left:8px;flex-wrap:wrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:9px 12px;border-radius:8px;font-size:13px;font-weight:600;color:#c3d2e4;white-space:nowrap;transition:.15s}
.tab:hover{background:rgba(255,255,255,.09);color:#fff}
.tab.on{background:rgba(255,255,255,.15);color:#fff}
.tab.maize{background:var(--maize);color:var(--navy);font-weight:800}
.tab.maize:hover{background:var(--maize2);color:var(--navy)}
.builtby{margin-left:auto;flex:none;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:999px;
  padding:6px 14px 6px 7px}
.builtby .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,#ffcb05,#ff9f1c);
  color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex:none}
.builtby span{font-size:11.5px;color:#dbe6f1;white-space:nowrap}
.builtby b{color:#fff;font-weight:700}

/* ================= SCREENS ================= */
.screen{display:none;max-width:var(--maxw);margin:0 auto;padding:26px 20px 60px}
.screen.on{display:block}

/* ================= HERO / CHOOSE ================= */
.hero{background:linear-gradient(150deg,#00274c 0%,#0b3a6b 62%,#123f72 100%);border-radius:18px;
  padding:46px 44px 42px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero::after{content:"P";position:absolute;right:22px;top:-86px;font-family:"Fraunces",Georgia,serif;
  font-weight:900;font-size:340px;line-height:1;color:rgba(255,203,5,.09)}
.hero .kick{font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--maize);position:relative;z-index:1}
.hero h1{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(30px,4.4vw,52px);line-height:1.04;
  letter-spacing:-.015em;margin:15px 0 13px;max-width:960px;position:relative;z-index:1}
.hero p{font-size:16px;line-height:1.62;color:#c6d5e6;max-width:760px;position:relative;z-index:1}
.hero .htags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;position:relative;z-index:1}
.hpill{font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.24);color:#dbe6f1}
.hpill.m{background:var(--maize);color:var(--navy);border-color:var(--maize);font-weight:800}
.bystrip{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;gap:14px;position:relative;z-index:1;flex-wrap:wrap}
.bystrip .av{width:52px;height:52px;border-radius:14px;background:linear-gradient(140deg,#ffcb05,#ff9f1c);
  color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex:none}
.bystrip .t{font-size:13px;color:#a9bfd8;line-height:1.45}
.bystrip .t b{display:block;color:#fff;font-size:19px;font-family:"Fraunces",Georgia,serif;font-weight:700;letter-spacing:.01em}

.sectitle{margin:34px 0 16px}
.sectitle h2{font-family:"Fraunces",Georgia,serif;font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--navy);letter-spacing:-.01em}
.sectitle p{font-size:14.5px;color:var(--mut);margin-top:6px;max-width:820px;line-height:1.6}

.habitats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hab{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0;overflow:hidden;
  text-align:left;transition:.2s;display:flex;flex-direction:column}
.hab:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(9,25,45,.16);border-color:#cfc6ae}
.hab .top{padding:20px 20px 0}
.hab .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:#fff;margin-bottom:14px}
.hab h3{font-family:"Fraunces",Georgia,serif;font-size:21px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.hab .sub{font-size:12.5px;color:var(--mut);font-weight:600;margin-top:4px;min-height:34px}
.hab .preview{margin:14px 20px 0;border-radius:10px;overflow:hidden;border:1px solid var(--line2);background:var(--paper2);height:112px;position:relative}
.hab .go{margin:16px 20px 20px;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--navy)}
.hab .go .arw{transition:.2s}
.hab:hover .go .arw{transform:translateX(4px)}
.hab.a .ic{background:#5865f2}.hab.b .ic{background:#0e7490}.hab.c .ic{background:var(--gs-green)}.hab.d .ic{background:#d97706}

/* mini previews inside habitat cards */
.pv{position:absolute;inset:0;padding:10px;font-size:8px}
.pv-disc{background:#313338;display:flex;gap:8px}
.pv-disc .r{width:22px;background:#1e1f22;border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px 0}
.pv-disc .r i{width:11px;height:11px;border-radius:4px;background:#3a3c42;display:block}
.pv-disc .r i.on{background:var(--navy);border:1px solid var(--maize)}
.pv-disc .s{width:56px;background:#2b2d31;border-radius:4px;padding:5px}
.pv-disc .s b{display:block;height:5px;border-radius:3px;background:#4a4d55;margin-bottom:5px;width:80%}
.pv-disc .s b.w{width:60%}
.pv-disc .m{flex:1;background:#313338;border-radius:4px;padding:5px}
.pv-disc .m b{display:block;height:5px;border-radius:3px;background:#4a4d55;margin-bottom:6px;width:70%}
.pv-disc .m i{display:block;height:22px;border-radius:3px;background:#2b2d31;border-left:2px solid var(--maize)}
.pv-site{background:#fff}
.pv-site .n{height:16px;background:var(--navy);border-radius:3px;margin-bottom:7px}
.pv-site .g{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pv-site .g i{height:26px;background:var(--paper2);border:1px solid var(--line2);border-radius:3px;display:block}
.pv-site .g i.full{grid-column:span 2;background:var(--maize);border-color:var(--maize)}
.pv-sheet{background:#fff}
.pv-sheet .b{height:14px;background:#f1f3f4;border-radius:3px 3px 0 0;margin-bottom:4px}
.pv-sheet table{width:100%;border-collapse:collapse}
.pv-sheet td{border:1px solid #e8eaed;height:12px}
.pv-sheet tr:first-child td{background:#e6f4ea}
.pv-news{background:var(--paper);padding:10px;display:flex;flex-direction:column;gap:6px}
.pv-news .h{height:26px;background:var(--navy);border-radius:4px;position:relative}
.pv-news .h::after{content:"";position:absolute;left:6px;top:8px;width:26px;height:9px;background:var(--maize);border-radius:2px}
.pv-news .row{display:flex;gap:6px}
.pv-news .row i{flex:1;height:26px;background:#fff;border:1px solid var(--line);border-radius:4px;display:block}
.pv-news .row i.k{background:var(--maize);border-color:var(--maize)}

.hownote{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:20px 24px;margin-top:22px}
.hownote .n{width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--maize);
  display:flex;align-items:center;justify-content:center;font-weight:800;flex:none;font-family:"Fraunces",serif}
.hownote p{font-size:14.5px;color:var(--body);line-height:1.62}
.hownote b{color:var(--ink)}

/* ================= GENERIC PANEL ================= */
.panelhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.ph-l .eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mut2)}
.ph-l h2{font-family:"Fraunces",Georgia,serif;font-size:clamp(23px,2.8vw,32px);font-weight:700;color:var(--navy);margin-top:6px;letter-spacing:-.01em}
.ph-l p{font-size:14.5px;color:var(--mut);margin-top:7px;max-width:720px;line-height:1.6}
.devsw{display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px;gap:3px;flex:none}
.devsw button{padding:8px 15px;border-radius:7px;font-size:12.5px;font-weight:700;color:var(--mut)}
.devsw button.on{background:var(--navy);color:#fff}

.builtbadge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 13px 5px 6px;margin-top:12px}
.builtbadge .av{width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,#ffcb05,#ff9f1c);
  color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:9.5px}
.builtbadge span{font-size:11.5px;color:var(--mut);font-weight:600}
.builtbadge b{color:var(--navy)}