/* Public guide pages (couriers, tracking, destinations, guides). Same look as the rest of Kargom. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F4F6FA;color:#1F2A3C;font:400 16px/1.6 'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#2463DB}a:hover{color:#1A4FB8}
h1,h2,h3{font-family:'Outfit',sans-serif;line-height:1.15;margin:0;color:#1F2A3C}
img{max-width:100%;height:auto}
.in{max-width:1120px;margin:0 auto;padding:0 24px}

.top{background:#1F2A3C}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand img{display:block;height:28px;width:auto}
.nav{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:600}
.nav a{color:#DCE4F2;text-decoration:none;white-space:nowrap}.nav a:hover{color:#FFFFFF}
.nav .btn-s{padding:8px 14px;border-radius:8px;background:#2463DB;color:#FFFFFF}
.nav .btn-s:hover{background:#1A4FB8}

.crumbs{background:#FFFFFF;border-bottom:1px solid #E1E7EF;font-size:13px;color:#586579}
.crumbs .in{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;padding-bottom:10px}
.crumbs a{color:#586579;text-decoration:none}.crumbs a:hover{color:#2463DB}

.hero{background:linear-gradient(110deg,#3D6DEB 0%,#2A4FC8 55%,#1D3593 100%);color:#FFFFFF}
.hero .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding-top:44px;padding-bottom:48px}
.hero-t{flex:1 1 420px;display:flex;flex-direction:column;gap:12px}
.hero h1{color:#FFFFFF;font-size:clamp(32px,4.4vw,46px);font-weight:700;letter-spacing:-.01em}
.lead{margin:0;font-size:18px;color:#DCE4F2;max-width:560px}.lead b{color:#FFFFFF}

.qf,.tf,.calc{flex:0 1 400px;width:100%;background:#FFFFFF;color:#1F2A3C;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(8,14,40,.28)}
.qf-t{font:600 19px 'Outfit',sans-serif}
.qf label,.calc label,.tf label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#3E4A5C}
.qf select,.qf input,.tf input,.calc input,.calc select{min-height:48px;border-radius:10px;border:1px solid #C9D6EA;padding:0 12px;font:500 16px 'Plus Jakarta Sans',sans-serif;color:#1F2A3C;background:#FFFFFF;width:100%}
.qf select:focus,.qf input:focus,.tf input:focus,.calc input:focus,.calc select:focus{outline:none;border-color:#2463DB;box-shadow:0 0 0 1px #2463DB}
.qf button,.tf button,.btn{min-height:50px;border:0;border-radius:10px;background:#2463DB;color:#FFFFFF;font:700 16px 'Plus Jakarta Sans',sans-serif;cursor:pointer;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.qf button:hover,.tf button:hover,.btn:hover{background:#1A4FB8;color:#FFFFFF}
.tf-row{display:flex;gap:8px}.tf-row input{flex:1;min-width:0;text-transform:uppercase}
.tf-out{margin:0;font-size:14px;color:#586579;min-height:1.5em}
.tf-out b{color:#1F2A3C}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.calc-out{display:block;padding:14px;border-radius:12px;background:#F5F9FF;border:1px solid #D6E4FB;font-size:15px}
.calc-out .v{font:700 26px 'Outfit',sans-serif;display:block}
.calc-line{font:600 18px 'Outfit',sans-serif;padding:14px 16px;border-radius:12px;background:#F5F9FF;border:1px solid #D6E4FB}

.wrap{padding-top:32px;padding-bottom:56px;display:flex;flex-direction:column;gap:20px}
.sec{background:#FFFFFF;border:1px solid #E1E7EF;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px}
.sec h2{font-size:26px;font-weight:600}
.sec h3{font-size:19px;font-weight:600;margin-top:8px}
.sec p{margin:0}
.note{font-size:13px;color:#586579;margin:0}
.prose{line-height:1.7}.prose p{margin:0 0 14px}.prose h2{margin:22px 0 10px}.prose h3{margin:18px 0 8px}.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}.prose li{margin:4px 0}

.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #E1E7EF;border-radius:12px}
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:#FFFFFF}
.tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#586579;background:#F8FAFD;padding:10px 14px;white-space:nowrap}
.tbl td{padding:12px 14px;border-top:1px solid #EEF2F7;vertical-align:middle}
.tbl td small{display:block;font-size:12px;color:#586579}
.tbl .p{font:700 18px 'Outfit',sans-serif;white-space:nowrap}
.tbl .c{display:flex;align-items:center;gap:10px}
.tbl .c img{width:56px;height:28px;object-fit:contain;flex:none}
.matrix td,.matrix th{text-align:center;white-space:nowrap}.matrix td:first-child,.matrix th:first-child{text-align:left;font-weight:700}
.matrix .best{background:#E6F4EA;color:#166534;font-weight:700}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:#FFFFFF;border:1px solid #E1E7EF;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:#1F2A3C;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:#2463DB;box-shadow:0 10px 26px rgba(36,99,219,.12);color:#1F2A3C}
.card img{width:80px;height:40px;object-fit:contain}
.card b{font:600 19px 'Outfit',sans-serif}
.card span{font-size:14px;color:#586579}.card span b{font:700 16px 'Plus Jakarta Sans',sans-serif;color:#1F2A3C}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid #C9D6EA;background:#FFFFFF;text-decoration:none;color:#1F2A3C;font-size:14px;font-weight:600}
.chips a:hover{border-color:#2463DB;color:#2463DB}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;background:#F5F9FF}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:#2463DB;color:#FFFFFF;display:grid;place-items:center;font-weight:800;font-size:14px;margin-bottom:4px}
.steps span{font-size:14px;color:#3E4A5C}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ways div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;border:1px solid #E1E7EF}
.ways span{font-size:14px;color:#3E4A5C}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.ticks li::before{content:'✓';color:#16A34A;font-weight:800;margin-right:8px}
.dl{margin:0;display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:10px 20px}
.dl dt{font-weight:700}.dl dd{margin:0;color:#3E4A5C}

.faq{display:flex;flex-direction:column;gap:8px}
.faq details{border:1px solid #E1E7EF;border-radius:12px;padding:0 16px}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:20px;line-height:1;color:#2463DB}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:0 0 14px;color:#3E4A5C}

.cta{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;background:#1F2A3C;border-color:#1F2A3C}
.cta h2{color:#FFFFFF}.cta p{color:#DCE4F2}

.art{max-width:1120px}
.art-h{display:flex;flex-direction:column;gap:8px}
.art-h h1{font-size:clamp(30px,4vw,44px);font-weight:700}
.meta{margin:0;font-size:14px;color:#586579}
.art-cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.art-cols>.prose{flex:999 1 560px;min-width:0;background:#FFFFFF;border:1px solid #E1E7EF;border-radius:18px;padding:28px}
.art-cols>aside{flex:1 1 300px;position:sticky;top:16px}
.art-cols>aside .qf{box-shadow:none;border:1px solid #E1E7EF}


@media (max-width:760px){
  .in{padding:0 16px}
  .nav{gap:12px;font-size:13px}.nav .hide-s{display:none}.nav .btn-s{padding:7px 10px}
  .brand img{height:22px}
  .hero .in{padding-top:28px;padding-bottom:32px;gap:20px}
  .lead{font-size:16px}
  .qf,.tf,.calc{flex-basis:100%;padding:16px}
  .wrap{padding-top:20px;padding-bottom:40px;gap:14px}
  .sec{padding:18px;border-radius:14px}
  .sec h2{font-size:22px}
  .tbl{font-size:14px}.tbl td,.tbl th{padding:10px}
  .tbl .c img{width:44px}
  .dl{grid-template-columns:1fr;gap:2px 0}.dl dd{margin-bottom:10px}
  .art-cols>.prose{padding:18px}
  .art-cols>aside{position:static}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:370px){.nav a:first-child{display:none}}