/* Alpine Pakistan — Mango Pop */
:root{
  --ink:#1C2433;
  --ink-soft:#475066;
  --royal:#2D46B9;
  --royal-deep:#22368F;
  --mango:#FFC93C;
  --mango-pale:#FFF3D1;
  --rose:#E0566B;
  --rose-text:#C23B50;
  --rose-pale:#FCEDEF;
  --leaf:#41A05F;
  --leaf-text:#2E7A47;
  --leaf-pale:#EAF5EE;
  --cloud:#F4F6FB;
  --line:#E3E7F0;
  --white:#FFFFFF;
  --shadow:4px 4px 0;
  --rad:14px;
  --rad-sm:10px;
  --maxw:1080px;
  --gutter:20px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--royal);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--royal-deep)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--royal);outline-offset:2px;border-radius:4px;
}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;font-weight:800;line-height:1.22;color:var(--ink)}
h1{font-size:clamp(1.7rem,4.5vw,2.45rem);letter-spacing:-.01em}
h2{font-size:clamp(1.32rem,3vw,1.7rem);margin:2.2rem 0 .85rem}
h3{font-size:1.13rem;margin:1.5rem 0 .6rem}
p{margin:0 0 1.05rem}
ul,ol{margin:0 0 1.05rem 1.35rem}
li{margin-bottom:.45rem}
strong{font-weight:700}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ============ Header / Mast ============ */
.mast{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:2px solid var(--ink)}
.mast-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;min-height:62px;gap:16px}
.mast-brand{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.28rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.mast-brand .tld{color:var(--royal)}
.mast-menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0}
.mast-menu > li{position:relative}
.mast-link{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;font-weight:600;font-size:.94rem;color:var(--ink-soft);text-decoration:none;border-radius:var(--rad-sm);background:none;border:0;font-family:inherit;cursor:pointer}
.mast-link:hover{background:var(--cloud);color:var(--ink)}
.mast-link .caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.drop{position:absolute;top:calc(100% + 8px);left:0;min-width:248px;background:var(--white);border:2px solid var(--ink);border-radius:var(--rad);box-shadow:var(--shadow) var(--mango);padding:8px;list-style:none;display:none;z-index:70}
.drop a{display:block;padding:8px 12px;font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:none;border-radius:8px}
.drop a:hover{background:var(--mango-pale)}
.mast-menu > li.open > .drop{display:block}
.burger{display:none;background:none;border:2px solid var(--ink);border-radius:var(--rad-sm);padding:8px 10px;cursor:pointer}
.burger span{display:block;width:20px;height:2.5px;background:var(--ink);margin:4px 0;border-radius:2px;transition:transform .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============ Hero band ============ */
.hero-band{background:var(--mango);border-bottom:2px solid var(--ink);padding:42px 0 38px}
.hero-band .crumbs{margin-bottom:14px}
.hero-kick{display:inline-block;background:var(--ink);color:var(--mango);font-family:'Outfit',sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.hero-band h1{max-width:760px}
.hero-sub{max-width:680px;margin-top:12px;font-size:1.04rem;color:#3B3417}

/* Breadcrumbs */
.crumbs{font-size:.86rem;font-weight:600}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0}
.crumbs a{color:var(--ink);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--ink-soft)}
.crumbs .here{color:var(--ink-soft)}

/* ============ DNA: Problem / Solution boxes ============ */
.problem-box,.solution-box{background:var(--white);border:2px solid var(--ink);border-radius:var(--rad);padding:18px 20px;margin:1.6rem 0}
.problem-box{box-shadow:var(--shadow) var(--rose)}
.solution-box{box-shadow:var(--shadow) var(--leaf)}
.problem-box p:last-child,.solution-box p:last-child{margin-bottom:0}
.problem-label,.solution-label{font-family:'Outfit',sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.problem-label{color:var(--rose-text)}
.solution-label{color:var(--leaf-text)}

/* ============ Article layout ============ */
.page-body{padding:36px 0 56px}
.article{max-width:760px}
.article > p:first-of-type{font-size:1.06rem}
.struggle-list{list-style:none;margin-left:0}
.struggle-list li{position:relative;padding-left:30px;margin-bottom:.7rem}
.struggle-list li::before{content:"✗";position:absolute;left:0;top:0;color:var(--rose-text);font-weight:800}

/* Step cards */
.step-row{counter-reset:stp;list-style:none;margin:1.2rem 0 1.6rem}
.step-row > li{counter-increment:stp;position:relative;background:var(--cloud);border:2px solid var(--ink);border-radius:var(--rad);padding:16px 18px 16px 62px;margin-bottom:14px}
.step-row > li::before{content:counter(stp);position:absolute;left:16px;top:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--royal);color:var(--white);font-family:'Outfit',sans-serif;font-weight:800;font-size:1rem;border-radius:10px;border:2px solid var(--ink)}
.step-row > li > strong:first-child{display:block;margin-bottom:4px;font-family:'Outfit',sans-serif}
.step-row p:last-child{margin-bottom:0}

/* Pro tips */
.tip-stack{list-style:none;margin:1.2rem 0 1.6rem}
.tip-stack li{position:relative;padding:12px 16px 12px 44px;border:2px solid var(--ink);border-radius:var(--rad-sm);margin-bottom:10px;background:var(--mango-pale)}
.tip-stack li::before{content:"★";position:absolute;left:16px;top:11px;color:var(--royal);font-weight:800}
.tip-stack p:last-child,.struggle-list p:last-child{margin-bottom:0}

/* ============ Tables ============ */
.tbl-scroll{overflow-x:auto;margin:1.3rem 0 1.7rem;border:2px solid var(--ink);border-radius:var(--rad);box-shadow:var(--shadow) var(--royal);-webkit-overflow-scrolling:touch}
table.grid{border-collapse:collapse;width:100%;min-width:560px;background:var(--white);font-size:.95rem}
table.grid th{background:var(--ink);color:var(--white);font-family:'Outfit',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;padding:11px 14px;text-align:left}
table.grid td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
table.grid tr:nth-child(even) td{background:var(--cloud)}
table.grid td.pick{background:var(--leaf-pale);font-weight:700}

/* ============ FAQ accordion ============ */
.faq-set{margin:1.2rem 0 1.8rem}
.faq-item{border:2px solid var(--ink);border-radius:var(--rad);background:var(--white);margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 18px;background:none;border:0;font-family:'Outfit',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);text-align:left;cursor:pointer}
.faq-q:hover{background:var(--cloud)}
.faq-q .tick{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:var(--mango);border:2px solid var(--ink);border-radius:8px;font-weight:800;transition:transform .18s}
.faq-q[aria-expanded="true"] .tick{transform:rotate(45deg)}
.faq-a{padding:0 18px;max-height:0;overflow:hidden;transition:max-height .22s ease,padding .22s ease}
.faq-item.on .faq-a{padding:2px 18px 16px;max-height:none}
.faq-a p:last-child{margin-bottom:0}

/* ============ Calculator tool ============ */
.calc-tool{border:2px solid var(--ink);border-radius:var(--rad);box-shadow:var(--shadow) var(--royal);background:var(--white);padding:22px;margin:1.6rem 0}
.calc-tool h2,.calc-tool h3{margin-top:0}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:16px}
.calc-field label{display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:.86rem;margin-bottom:5px}
.calc-field input,.calc-field select{width:100%;padding:11px 12px;font:inherit;font-size:.98rem;border:2px solid var(--ink);border-radius:var(--rad-sm);background:var(--white);color:var(--ink)}
.calc-btn{display:inline-block;background:var(--royal);color:var(--white);font-family:'Outfit',sans-serif;font-weight:800;font-size:1rem;padding:12px 26px;border:2px solid var(--ink);border-radius:var(--rad-sm);box-shadow:var(--shadow) var(--mango);cursor:pointer;transition:transform .12s}
.calc-btn:hover{transform:translate(-1px,-1px)}
.calc-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--mango)}
.calc-out{margin-top:18px;border:2px dashed var(--royal);border-radius:var(--rad-sm);background:var(--cloud);padding:16px;display:none}
.calc-out.show{display:block}
.calc-out .big{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.5rem;color:var(--royal-deep)}
.calc-note{font-size:.86rem;color:var(--ink-soft);margin-top:10px}

/* ============ Cards / grids (home, related) ============ */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:1.4rem 0}
.tile{display:block;background:var(--white);border:2px solid var(--ink);border-radius:var(--rad);padding:18px;text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s}
.tile:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow) var(--mango);color:var(--ink)}
.tile .tile-kick{font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--royal);margin-bottom:6px}
.tile h3{margin:0 0 6px;font-size:1.02rem}
.tile p{font-size:.9rem;color:var(--ink-soft);margin:0}
.related-rail{margin:2.4rem 0 0;padding-top:1.6rem;border-top:2px solid var(--ink)}

/* Inline CTA band (internal links, not forms) */
.go-band{background:var(--ink);color:var(--white);border-radius:var(--rad);padding:20px 22px;margin:1.8rem 0;border:2px solid var(--ink);box-shadow:var(--shadow) var(--mango)}
.go-band a{color:var(--mango);font-weight:700}
.go-band p:last-child{margin-bottom:0}

/* ============ Homepage ============ */
.duo-boxes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6rem 0}
.duo-boxes .problem-box,.duo-boxes .solution-box{margin:0}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:1.4rem 0 2rem}
.cat-card{background:var(--white);border:2px solid var(--ink);border-radius:var(--rad);padding:18px}
.cat-card h3{margin:0 0 10px;font-size:1.04rem}
.cat-card ul{list-style:none;margin:0}
.cat-card li{margin-bottom:7px}
.cat-card a{font-size:.92rem;font-weight:600;text-decoration:none}
.cat-card a:hover{text-decoration:underline}
.cat-card .more{display:inline-block;margin-top:8px;font-family:'Outfit',sans-serif;font-weight:800;font-size:.82rem;color:var(--ink-soft)}
@media (max-width:700px){.duo-boxes{grid-template-columns:1fr}}

/* ============ Footer ============ */
.base{background:var(--ink);color:#C8CEDD;margin-top:64px;border-top:2px solid var(--ink)}
.base-cols{max-width:var(--maxw);margin:0 auto;padding:44px var(--gutter) 28px;display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px}
.base-brand{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.2rem;color:var(--white)}
.base-brand .tld{color:var(--mango)}
.base-tag{font-size:.88rem;margin-top:8px;max-width:240px}
.base h4{color:var(--mango);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:12px}
.base ul{list-style:none;margin:0}
.base li{margin-bottom:8px}
.base a{color:#C8CEDD;text-decoration:none;font-size:.9rem}
.base a:hover{color:var(--white);text-decoration:underline}
.base-line{border-top:1px solid #36405A;padding:16px var(--gutter);font-size:.84rem;text-align:center;color:#8E97AE}

/* ============ Utility ============ */
.note-flag{font-size:.88rem;background:var(--cloud);border:1.5px solid var(--line);border-radius:var(--rad-sm);padding:10px 14px;color:var(--ink-soft);margin:1rem 0}
.skip-jump{position:absolute;left:-9999px;top:0;background:var(--mango);color:var(--ink);padding:10px 16px;font-weight:700;z-index:100;border-radius:0 0 10px 0}
.skip-jump:focus{left:0}

/* ============ Responsive ============ */
@media (max-width:880px){
  .base-cols{grid-template-columns:repeat(2,1fr)}
  .base-cols > div:first-child{grid-column:1/-1}
}
@media (max-width:780px){
  .burger{display:block}
  .mast-menu{display:none;position:absolute;top:62px;left:0;right:0;background:var(--white);border-bottom:2px solid var(--ink);flex-direction:column;align-items:stretch;padding:10px var(--gutter) 18px;gap:2px;max-height:calc(100vh - 62px);overflow-y:auto}
  .mast-menu.show{display:flex}
  .mast-link{width:100%;justify-content:space-between;padding:12px 10px;font-size:1rem}
  .drop{position:static;display:none;min-width:0;border:0;box-shadow:none;background:var(--cloud);border-radius:var(--rad-sm);margin:2px 0 8px}
  .mast-menu > li.open > .drop{display:block}
  .hero-band{padding:30px 0 28px}
  body{font-size:16px}
}
@media (max-width:480px){
  .step-row > li{padding-left:58px}
  .calc-tool{padding:16px}
  .base-cols{grid-template-columns:1fr}
}