@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,300&family=Poppins:wght@400;500;600&display=swap');

@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-ThinItalic.woff2') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-ExtraLightItalic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-LightItalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-SemiBoldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-ExtraBoldItalic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-4/web/InterDisplay-BlackItalic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--text:#031225;--text2:#03122599;--text3:#03122570;--bg:#fff;--bg2:#F9F6EE;--border:#03122599;--border2:#03122588;
    --g:#008F7D;
    --salmon:#EB6C5F;
    --salmon11:#EB6C5F11;
    --salmon22:#EB6C5F22;
    --salmon44:#EB6C5F44;
    --salmon66:#EB6C5F66;
    --deepred:#D92B1A;
    --deepred11:#D92B1A11;
    --deepred22:#D92B1A22;
    --deepred44:#D92B1A44;
    --deepred66:#D92B1A66;
    --purple:#9B6DC9;
    --purple11:#9B6DC911;
    --purple22:#9B6DC922;
    --purple44:#9B6DC944;
    --purple66:#9B6DC966;
    --blue:#83BACE;
    --blue11:#83BACE11;
    --blue22:#83BACE22;
    --blue44:#83BACE44;
    --blue66:#83BACE66;
    --gold:#E8BF2F;
    --gold11:#E8BF2F11;
    --gold22:#E8BF2F22;
    --gold44:#E8BF2F44;
    --gold66:#E8BF2F66;
    --teal:#5EB5AA;
    --teal11:#5EB5AA11;
    --teal22:#5EB5AA22;
    --teal44:#5EB5AA44;
    --teal66:#5EB5AA66;
    --darkteal:#004C42;
    --deepnavy:#082D5D;
    --deepnavy11:#082D5D11;
    --deepnavy22:#082D5D22;
    --deepnavy44:#082D5D44;
    --deepnavy66:#082D5D66;
    --navy:#0C448C;
    --navy11:#0C448C11;
    --navy22:#0C448C22;
    --navy44:#0C448C44;
    --navy66:#0C448C66;
    --glow:#B1C11F;
    --glow11:#B1C11F11;
    --glow22:#B1C11F22;
    --glow44:#B1C11F44;
    --glow66:#B1C11F66;
}
body{font-family:'Inter',sans-serif;color:var(--text);background:var(--bg);line-height:1.6;font-size:17px}
a{color:var(--g);text-decoration:none;transition:color .15s}
.root{max-width:1330px;margin:0 auto;padding:0 24px 4rem}
.site-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.nav-wordmark{font-family:'Fraunces',serif;font-size:18px;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--text)}
.nav-wordmark img{height: 20px; width:auto;}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{font-size:13px;color:var(--text2);text-decoration:none}
.nav-cta{text-align: center;width:144px;font-size:13px;font-weight:500;padding:7px 14px;border-radius:6px;border:.5px solid var(--purple66);color:var(--purple);text-decoration:none}
.nav-center{display:flex;gap:6px}
.nav-product{font-size:13px;font-weight:500;padding:5px 11px;border-radius:20px;color:var(--text);text-decoration:none;border:.5px solid transparent}
.nav-product:hover{background:var(--bg2)}
.nav-dl{display:flex;gap:8px}
.nav-dl a{font-size:13px;font-weight:500;padding:7px 14px;border-radius:6px;text-decoration:none;border:.5px solid var(--border2);color:var(--text2)}
.nav-dl a.primary{background:var(--g);color:#fff;border-color:var(--g)}
.bc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--text3);padding:16px 0 0;margin-bottom:28px}
.bc a{color:var(--text2);text-decoration:none}.bc span{opacity:.4}.bc-current{opacity:1;color:var(--text2)}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);display:block;margin-bottom:12px}
h1{font-family:'Fraunces',serif;font-size:44px;font-weight:700;line-height:1.06;letter-spacing:-.022em;margin:0 0 16px}
h1 em{font-style:italic;font-weight:300;color:var(--purple)}
h2{font-family:'Fraunces',serif;font-size:26px;font-weight:700;line-height:1.2;margin:32px 0 12px}
h2:first-child{margin-top:0}
h3{font-family:'Fraunces',serif;font-size:18px;font-weight:700;margin:24px 0 8px}
.intro{font-size:17px;line-height:1.75;color:var(--text2);max-width:540px;margin:0 0 24px}
p,.body-text{font-size:16px;line-height:1.8;color:var(--text2);margin:0 0 16px}
p a{color:var(--text2)}
.hero{padding:48px 0 40px;text-align:center}
.hero .intro{margin-left:auto;margin-right:auto}
.search-wrap{position:relative;max-width:520px;margin:0 auto}
.search-input{width:100%;box-sizing:border-box;padding:14px 50px 14px 18px;font-family:'Inter',sans-serif;font-size:16px;border-radius:10px;border:1px solid var(--purple);background:var(--bg);color:var(--text);outline:none}
.search-input::placeholder{color:var(--text3)}
.search-hint{font-size:13px;color:var(--text3);margin-top:10px;text-align:center}
.search-hint a{color:var(--purple);text-decoration:none}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:40px}
.stat{background:var(--bg);padding:14px;text-align:center;border-right: 1px solid var(--text);}
.stat:last-child{border-right:none}
.stat-num{font-family:'Fraunces',serif;font-size:26px;font-weight:700;line-height:1;margin-bottom:4px}
.stat-label{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.section-label{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin:28px 0 14px;display:block}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.sec-title{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
.sec-link{font-size:13px;color:var(--purple);text-decoration:none}
.type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:40px}
.type-card{border:.5px solid var(--border);border-radius:10px;padding:18px;text-decoration:none;display:block;transition:border-color .15s}
.type-card:hover{border-color:var(--border2)}
.type-icon{width:32px;height:32px;border-radius:8px;margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.type-name{font-family:'Fraunces',serif;font-size:16px;font-weight:500;margin-bottom:4px;color:var(--text2)}
.type-count{font-size:13px;color:var(--text3)}
.franchise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:40px}
.franchise-card{border:.5px solid var(--border);border-radius:10px;padding:16px 18px;display:grid;grid-template-columns: 1fr;gap:10px;align-items:center;justify-content:space-between;text-decoration:none;transition:border-color .15s}
.franchise-card:hover{border-color:var(--border2)}
.franchise-name{font-family:'Fraunces',serif;font-size:15px;font-weight:500;margin-bottom:4px;color:var(--text2)}
.franchise-meta{font-size:13px;color:var(--text3)}
.fanotype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:40px}
.ft-card{border:.5px solid var(--border);border-radius:10px;padding:14px 16px;text-decoration:none;display:block}
.ft-name{font-family:'Fraunces',serif;font-size:14px;font-weight:500;margin-bottom:4px}
.ft-desc{font-size:13px;color:var(--text3);line-height:1.5}
.bottom-split{display:grid;grid-template-columns:1fr 2fr;gap:12px;margin-bottom:40px}
.contrib-card{border:.5px solid var(--gold44);border-radius:12px;padding:22px;background:var(--bg2)}
.contrib-title{font-family:'Fraunces',serif;font-size:20px;font-weight:700;margin-bottom:8px;line-height:1.2}
.contrib-body{font-size:14px;line-height:1.65;color:var(--text2);margin-bottom:16px}
.card-label{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-family:'Inter',sans-serif;}
.card{border:.5px solid var(--salmon);border-radius:12px;padding:22px;display:block;text-decoration:none;transition:border-color .15s;background:var(--salmon11);border-color: var(--salmon) !important;}
.card-cream{border-radius:12px;padding:22px;text-decoration:none;transition:border-color .15s;background:var(--bg2);border-color: var(--bg2) !important;}
.card-a{border:.5px solid var(--text2) !important}
.card:hover{border-color:var(--border2)}
.card-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:36px}
.card-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:36px}
.card-title{font-family:'Fraunces',serif;font-size:17px;font-weight:700;margin-bottom:6px;color:var(--text)}
.card-body{font-size:15px;line-height:1.65;color:var(--text2)}
.card-ghost{background:transparent !important;}
.card-min{background:transparent !important;border:.5px solid var(--border) !important;}
.card.folkic{border-color:var(--g) !important;background:var(--teal22) !important;}
.folkic-card{border:.5px solid var(--border);border-radius:12px;padding:22px;background:var(--bg2)}
.folkic-dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.folkic-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.folkic-title{font-family:'Fraunces',serif;font-size:18px;font-weight:700;margin-bottom:8px;line-height:1.2}
.folkic-body{font-size:14px;color:var(--text2);margin-bottom:12px}
.folkic-link{font-size:13px;font-weight:500;color:var(--teal);text-decoration:none}
.btn{font-size:15px;font-weight:500;padding:11px 22px;border-radius:8px;text-decoration:none;display:inline-block;border:.5px solid var(--border2);color:var(--text)}
.btn-primary{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-ghost{background:transparent;color:var(--text2);border:.5px solid var(--border2)}
.faq-item{border-bottom:.5px solid var(--border);padding:16px 0}
.faq-q{font-size:15px;font-weight:500;color:var(--text);margin-bottom:8px}
.faq-a{font-size:15px;color:var(--text2);line-height:1.7}
.faq-last{border-bottom:none;padding-bottom:0;margin-bottom:0}
.earn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:28px}
.earn-card{background:var(--bg2);border-radius:10px;padding:16px}
.earn-title{font-size:14px;font-weight:500;margin-bottom:6px}
.earn-body{font-size:13px;color:var(--text2);line-height:1.6}
.earn-rate{font-size:14px;font-weight:500;color:var(--purple);margin-top:8px}
.level-row{display:grid;grid-template-columns: 150px 1fr;gap:14px;padding:28px 150px 28px 46px;border-radius: 10px;align-items:start}
.level-row.dark{background:var(--purple22)}
.level-label{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.level-name{font-family:'Fraunces',serif;font-size:22px;font-weight:700;color:var(--purple)}
.level-desc{font-size:15px;color:var(--text2);line-height:1.65;margin-bottom:6px}
.level-ex{font-size:13px;color:var(--text3);font-style:italic}
.lumo-banner{border:.5px solid var(--gold44);border-radius:10px;padding:14px 18px;margin-bottom:32px;display:flex;align-items:center;gap:14px}
.lumo-dot{width:8px;height:8px;border-radius:50%;background:var(--purple);flex-shrink:0}
.lumo-text{font-size:15px;color:var(--text2);line-height:1.55;flex:1}
.lumo-text strong{font-weight:500;color:var(--text)}
.lumo-link{font-size:14px;font-weight:500;color:var(--purple);text-decoration:none;flex-shrink:0}
.meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:24px}
.meta-cell{background:var(--bg2);border-radius:8px;padding:12px 14px}
.meta-label{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.meta-value{font-size:15px;font-weight:500}
hr{border:none;border-top:.5px solid var(--border);margin:32px 0}
.site-footer{border-top:.5px solid var(--border);padding-top:24px;margin-top:44px;display:flex;align-items:center;justify-content:space-between}
.footer-brand{font-size:13px;color:var(--text3)}
.footer-brand a{color:var(--g);text-decoration:none}
.footer-links{display:flex;gap:16px}
.footer-links a{font-size:13px;color:var(--text3);text-decoration:none}

.price-mini{border:.5px solid var(--border);border-radius:12px;padding:18px}
.price-mini-title{font-family:'Fraunces',serif;font-size:16px;font-weight:700;margin-bottom:12px}
.price-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:.5px solid var(--border)}
.price-row:last-child{border-bottom:none}
.price-tier-name{font-size:14px;font-weight:500}
.price-tier-price{font-size:13px;color:var(--text3)}
.price-tier-price.free{color:var(--g);font-weight:500}
.price-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:24px 0 12px}
.price-tier{border:.5px solid var(--border);border-radius:12px;padding:18px;display:flex;flex-direction:column}
.price-tier.featured{border:2px solid var(--purple66)}
.tier-badge{font-size:10.6px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:20px;margin-bottom:10px;display:inline-block;align-self:flex-start;background:var(--bg2);color:var(--text3)}
.tier-badge.best{background:var(--purple22);color:var(--purple);border:.5px solid var(--purple66)}
.tier-name{font-family:'Fraunces',serif;font-size:20px;font-weight:700;margin-bottom:4px}
.tier-sub{font-size:12px;font-style:italic;color:var(--text3);margin-bottom:12px}
.tier-price{font-family:'Fraunces',serif;font-size:26px;font-weight:700;margin-bottom:2px}
.tier-per{font-size:13px;color:var(--text3);margin-bottom:14px}
.tier-was{font-size:12px;color:var(--text3);text-decoration:line-through;margin-left:5px}
.tier-cta{font-size:14px;font-weight:500;padding:8px 0;border-radius:7px;text-align:center;display:block;text-decoration:none;margin-bottom:14px;border:.5px solid var(--border2);color:var(--text)}
.tier-cta.featured{background:var(--purple);color:#fff;border-color:var(--purple)}
.tier-divider{border:none;border-top:.5px solid var(--bg);margin:12px 0 24px}
.tier-feat{font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:6px;display:flex;align-items:flex-start;gap:6px}
.tier-dot{width:4px;height:4px;border-radius:50%;background:var(--text3);margin-top:6px;flex-shrink:0}
.tier-dot.g{background:var(--g)}.tier-dot.p{background:var(--purple)}.tier-dot.a{background:var(--purple)}
.tier-alloc{margin-top:10px;font-size:12px;color:var(--text3)}
.tier-alloc .k{color:var(--purple);font-weight:500}
.tier-alloc .c{color:var(--purple);font-weight:500}

/* Header image: swap to smaller bg, adjust size/position */
.header-image{margin:-150px 0 36px 0;position:relative;left:50%;transform:translateX(-50%);width:100vw;height:500px;background-image:url('../img/hero-catalog.svg');background-repeat:no-repeat;background-position:center bottom;background-size:1550px auto;overflow:hidden;}
.header-line{position: relative;left: 50%;transform: translateX(-50%);width: 100vw;height: 1px;background: var(--purple);margin: 0 auto;}
.download-page{display: grid; gap: 44px; grid-template-columns: 1fr 1.4fr;}
.download-div{display: block;text-align: left;}
.download-div-2{display: none;}
.download-image{width:80%;}

.honest-note{border-left:2px solid var(--purple);padding:16px 20px;margin-bottom:36px}
.honest-note h3{font-family:'Fraunces',serif;font-size:16px;margin-bottom:8px;margin-top:0}
.honest-note p{font-size:15px;line-height:1.7;color:var(--text2)}

.step-row{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:0 0;}
.step-num{font-family:'Fraunces',serif;font-size:18px;font-weight:500;color:var(--bg);line-height:1;background: var(--purple);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.step-title{font-size:16px;font-weight:500;margin-bottom:6px;}
.step-desc{font-size:15px;color:var(--text2);line-height:1.65;margin-bottom: 24px;}

.tier-badge{font-size:10.6px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px 3px 8px;border-radius:20px;margin-bottom:10px;align-self:flex-start;color: var(--bg);border: .5px solid var(--purple);background: var(--purple);display: inline !important;width: fit-content; align-items: center;}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 740px) {
  .root {padding: 0 24px 3rem }

  /* Nav: hide text links */
  .nav-center { display: none }
  .nav-links { display: none }
  .nav-dl a:first-child { display: none }
  .site-nav { padding: 16.5px 0 16px 0 !important}

  /* Typography */
  h1 { font-size: 32px }
  h2 { font-size: 22px }
  .intro { font-size: 16px }
  .hero { padding: 32px 0 28px }

  /* Grids */
  .card-grid-2 { grid-template-columns: 1fr }
  .card-grid-3 { grid-template-columns: 1fr }
  .stat-grid { grid-template-columns: 1fr 1fr }
  .type-grid { grid-template-columns: 1fr 1fr }
  .franchise-grid { grid-template-columns: 1fr }
  .fanotype-grid { grid-template-columns: 1fr 1fr }
  .bottom-split { grid-template-columns: 1fr }
  .earn-grid { grid-template-columns: 1fr 1fr }
  .meta-grid { grid-template-columns: 1fr 1fr }

  /* Levels: collapse left col */
  .level-row { grid-template-columns: 1fr }
  .level-label { margin-bottom: 2px }

  /* Search: full width */
  .search-wrap { max-width: 100% }

  .footer-links{display:grid;gap:0px;grid-template-columns:85px 1fr !important;}

  .download-div{display: none}
  .download-div-2{display: block;text-align: center;overflow: hidden;width: calc(100% + 48px);margin-left: -24px;margin-right: -24px;}
  .download-page{display: grid; gap: 24px; grid-template-columns: 1fr;}
  .download-image{width:150%;margin-left: -25%;}
  
  .level-row{padding-right: 24px;}
  .price-tiers { grid-template-columns: 1fr 1fr }
  .tier-price{font-size:23px;}
}

@media (max-width: 520px) {
  h1 { font-size: 26px }
  .stat-grid { grid-template-columns: 1fr 1fr }
  .type-grid { grid-template-columns: 1fr }
  .fanotype-grid { grid-template-columns: 1fr }
  .earn-grid { grid-template-columns: 1fr }
  .meta-grid { grid-template-columns: 1fr }

  .header-image{margin:-70px 0 36px 0;position:relative;left:50%;transform:translateX(-50%);width:100vw;height:275px;background-image:url('../img/hero-catalog.svg');background-repeat:no-repeat;background-position:center bottom;background-size:950px auto;overflow:hidden;}
  .head-1 {background-position:50% bottom;}
  .price-tiers { grid-template-columns: 1fr }
}