@font-face{font-family:"Rubik-Light";font-display:swap;src:url(https://www.sendfromchina.com/app/css/fonts/Rubik-Light.woff2) format("woff2"),url(/app/css/fonts/Rubik-Light.woff2) format("woff2")}
.hsc{--navy:#071a36;--navy2:#0d2f5c;--orange:#f5651b;--orange2:#d94e0d;--ink:#142238;--muted:#5d697c;--paper:#f4f7fa;--line:#dfe6ed;--nav-h:134px;--nav-h-m:61px;background:#fff;color:var(--ink);font:400 17px/1.72 "Rubik-Light",Arial,sans-serif;overflow:hidden}
/* ===== guard against site-wide CSS =====
   The live template loads /app/css/index_new/css.css, which sets font-size and font-family on every element
   (* {font-size:15px; font-family:OPPOSans}) and margins on h1-h6, p and li. This block keeps the page look. */
.hsc *{font-size:inherit;font-family:inherit;line-height:inherit;box-sizing:border-box}
.hsc p,.hsc li{color:inherit}
.hsc summary{display:list-item}
.hsc p a,.hsc li a,.hsc small a{font-family:inherit!important;text-decoration:underline!important}
.hsc input,.hsc select{color:var(--ink)}
.hsc a{color:var(--orange2);text-decoration:underline;text-underline-offset:3px}
.hsc h1,.hsc h2,.hsc h3,.hsc .hsc-btn,.hsc th,.hsc summary,.hsc .hsc-label,.hsc .hsc-tool-title{font-family:Inter,Roboto,Arial,sans-serif}
.hsc h1,.hsc h2,.hsc h3,.hsc p{margin-top:0}
.hsc h1 em,.hsc h2 em{color:var(--orange);font-style:normal}
.hsc .hsc-wrap{width:min(1180px,calc(100% - 40px));margin:auto}

/* buttons: orange, hover turns white with orange text (site rule) */
.hsc .hsc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:2px solid var(--orange);border-radius:7px;background:var(--orange);color:#fff;text-decoration:none!important;text-transform:uppercase;font-weight:700;font-size:14px;letter-spacing:.04em;cursor:pointer;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.hsc .hsc-btn:hover,.hsc .hsc-btn:focus-visible{outline:0;background:#fff;color:var(--orange);transform:translateY(-2px);box-shadow:0 12px 24px rgba(245,101,27,.22)}


/* ===== site header spacing =====
   main.css gives <header class="header sub-header"> a fixed height and banner image (605px on desktop, ~427px on phones).
   The nav inside it is fixed, so the header itself must take no space; the hero padding above leaves the room instead.
   /services/China-warehousing does the same with .is-s-service, but only on desktop (its phone view shows a ~427px blank strip).
   This file is only loaded on this page, so collapsing the header here does not touch other pages. */
.header.sub-header{height:0!important;min-height:0!important;margin:0!important;padding:0!important;background-image:none!important;background-color:transparent!important}

/* ===== hero =====
   The site nav (.nav-box.white) is fixed and transparent at the top: 46px top bar + 88px nav = 134px.
   The hero starts at the very top of the page, under the nav, and its top padding = nav height + breathing room,
   so the H1 and the tool never sit under the nav. On phones (< 800px) the nav is replaced by the fixed
   61px white bar (.s-top-bar), so the padding switches to that height. */
.hsc .hsc-hero{position:relative;color:#fff;background:linear-gradient(90deg,rgba(4,18,42,.94),rgba(4,18,42,.84) 48%,rgba(4,18,42,.62)),url(/app/images/en/new/hs-code-tariff/hs-code-tariff-hero-1600.webp) center/cover no-repeat;border-bottom:7px solid var(--orange)}
.hsc .hsc-hero:before{content:"";position:absolute;inset:0 0 auto;height:var(--nav-h);background:linear-gradient(180deg,rgba(2,8,23,.55),rgba(2,8,23,0));pointer-events:none}
.hsc .hsc-hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:calc(var(--nav-h) + 72px) 0 80px}
.hsc .hsc-hero h1{margin:0 0 22px;color:#fff;font-size:clamp(34px,4vw,54px);font-weight:700;line-height:1.12;letter-spacing:-.035em}
.hsc .hsc-hero-copy p{max-width:600px;margin:0 0 24px;color:#e4ebf4;font-size:18px}
.hsc .hsc-hero-points{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.hsc .hsc-hero-points li{position:relative;padding-left:34px;color:#fff;font:500 15.5px/1.5 Inter,Roboto,Arial,sans-serif}
.hsc .hsc-hero-points li:before{content:"✓";position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;font:800 12px/1 Inter,sans-serif}

/* tool card */
.hsc .hsc-tool{padding:32px 32px 26px;border-top:5px solid var(--orange);border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 24px 54px rgba(0,0,0,.3)}
.hsc .hsc-tool-title{margin:0 0 18px;color:var(--navy);font-weight:600;font-size:21px;line-height:1.3;letter-spacing:-.02em}
.hsc .hsc-field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.hsc .hsc-label{margin:0;color:var(--navy);font-weight:600;font-size:13.5px;line-height:1.3}
.hsc .hsc-label span{color:var(--muted);font-weight:500}
.hsc .hsc-field input,.hsc .hsc-field select{width:100%;height:48px;margin:0;padding:0 14px;border:1px solid #cdd6e0;border-radius:8px;background:#fff;color:var(--ink);font:400 16px/1 "Rubik-Light",Arial,sans-serif;transition:border-color .2s,box-shadow .2s}
.hsc .hsc-field input:focus,.hsc .hsc-field select:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,101,27,.15)}
.hsc .hsc-field input[aria-invalid="true"]{border-color:#d4380d}
.hsc .hsc-or{display:flex;align-items:center;gap:12px;margin:-4px 0 10px;color:var(--muted);font:600 12px/1 Inter,Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em}
.hsc .hsc-or:before,.hsc .hsc-or:after{content:"";flex:1;height:1px;background:var(--line)}
.hsc .hsc-error{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:#fff1e8;color:#b23a0a;font:500 14px/1.45 Inter,Arial,sans-serif}
.hsc .hsc-error[hidden]{display:none}
.hsc .hsc-tool .hsc-btn{width:100%;margin-top:6px}
.hsc .hsc-tool-note{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.5}

/* ===== results ===== */
.hsc .hsc-results{padding:48px 0 40px;background:#fff}
.hsc .hsc-results[hidden]{display:none!important}
.hsc .hsc-results-title{margin:0 0 14px;color:var(--navy);font:600 22px/1.3 Inter,Roboto,Arial,sans-serif;letter-spacing:-.02em}
.hsc .hsc-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 14px 36px rgba(14,41,78,.06)}
.hsc .hsc-table{width:100%;min-width:860px;margin:0;border-collapse:collapse;font-size:15px}
.hsc .hsc-table th,.hsc .hsc-table td{padding:14px 16px;border:0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.hsc .hsc-table th{background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;line-height:1.35}
.hsc .hsc-table thead tr:first-child th{border-bottom:1px solid rgba(255,255,255,.18)}
.hsc .hsc-table thead tr:first-child th[colspan]{text-align:center}
.hsc .hsc-table thead tr+tr th{border-bottom:0}
.hsc .hsc-table thead tr+tr th{background:var(--navy2)}
.hsc .hsc-table td{color:#33445c;line-height:1.5}
.hsc .hsc-table td:first-child{color:var(--navy);font:600 14.5px/1.5 Inter,Roboto,Arial,sans-serif;white-space:nowrap}
.hsc .hsc-table td:nth-child(2){max-width:420px}
.hsc .hsc-table td:nth-child(n+3){white-space:nowrap;font-family:Inter,Roboto,Arial,sans-serif;font-size:14.5px}
.hsc .hsc-table td:nth-child(n+4){color:var(--orange2);font-weight:600}
.hsc .hsc-table td:empty:after{content:"\2014";color:#9aa6b6;font-weight:400}
.hsc .hsc-table tbody tr:nth-child(even) td{background:#f8fafc}
.hsc .hsc-table tbody tr:last-child td{border-bottom:0}
.hsc .hsc-empty{margin:16px 0 0;padding:16px 18px;border:1px dashed #cdd6e0;border-radius:10px;color:#4a5b70;font-size:15.5px}
.hsc .hsc-empty[hidden]{display:none}
.hsc .hsc-source{margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.6;word-break:break-word}
.hsc .hsc-source a{color:var(--muted)}

/* ===== sections ===== */
.hsc .hsc-sec{padding:88px 0}.hsc .hsc-sec.soft{background:var(--paper)}
.hsc .hsc-sec h2{margin:0 0 18px;color:var(--navy);font-size:clamp(28px,3.4vw,44px);font-weight:500;line-height:1.14;letter-spacing:-.035em}
.hsc .hsc-sec h3{margin:0 0 8px;color:var(--navy);font-size:19px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.hsc .hsc-sec p{margin:0 0 15px;color:var(--muted)}.hsc .hsc-sec p:last-child{margin-bottom:0}
.hsc .hsc-intro{max-width:780px;margin:0 auto 40px;text-align:center}
.hsc .hsc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.hsc .hsc-steps li{padding:28px 26px;border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:0 0 14px 14px;background:#fff;box-shadow:0 14px 36px rgba(14,41,78,.06)}
.hsc .hsc-steps b{display:block;margin-bottom:12px;color:var(--orange);font:800 28px/1 Inter,sans-serif}
.hsc .hsc-steps p{margin:0;font-size:15px}
/* image + text rows: image and text kept about the same height */
.hsc .hsc-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
.hsc .hsc-split.rev .hsc-media{order:2}
.hsc .hsc-media{margin:0;height:100%;min-height:380px;border-radius:16px;overflow:hidden;box-shadow:0 22px 52px rgba(14,41,78,.14)}
.hsc .hsc-copy{display:flex;flex-direction:column;justify-content:center}
.hsc .hsc-media img{display:block;width:100%;height:100%;object-fit:cover}
.hsc .hsc-copy h2{font-size:clamp(28px,3vw,40px)}
.hsc .hsc-stack{display:grid;gap:10px;margin:18px 0 20px;padding:0;list-style:none}
.hsc .hsc-stack li{padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:10px;background:#fff;color:#405069;font-size:15px;line-height:1.5}
.hsc .hsc-stack strong{display:block;color:var(--navy);font:600 15px/1.4 Inter,Roboto,Arial,sans-serif}
.hsc .hsc-list{display:grid;gap:12px;margin:18px 0 20px;padding:0;list-style:none}
.hsc .hsc-list li{position:relative;padding-left:36px;color:#405069;font-size:16px}
.hsc .hsc-list li:before{content:"✓";position:absolute;left:0;top:3px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--orange);color:#fff;font:800 13px/1 Inter,sans-serif}
.hsc .hsc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hsc .hsc-card{padding:24px;border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:0 0 14px 14px;background:#fff;box-shadow:0 14px 36px rgba(14,41,78,.06)}
.hsc .hsc-card h3{font-size:18px}.hsc .hsc-card p{margin:0;font-size:15px}
.hsc .hsc-sec .hsc-note{max-width:820px;margin:32px auto 0;text-align:center;font-size:15.5px}

/* quote bar */
.hsc .hsc-final{padding:72px 0;color:#fff;background:var(--navy2)}
.hsc .hsc-final-grid{display:flex;align-items:center;justify-content:space-between;gap:30px}
.hsc .hsc-final h2{margin:0;color:#fff;font-size:clamp(28px,3.6vw,44px);font-weight:500;line-height:1.14;letter-spacing:-.035em}
.hsc .hsc-final em{color:#ff8954}
.hsc .hsc-final p{max-width:640px;margin:12px 0 0;color:#c8d4e3}
.hsc .hsc-final small{display:block;margin-top:10px;color:#9fb0c6;font-size:13.5px}
.hsc .hsc-final small a{color:#ffb38a}

/* faq at the bottom */
.hsc .hsc-faq{max-width:860px;margin:auto}
.hsc .hsc-faq details{padding:18px 0;border-bottom:1px solid var(--line)}
.hsc .hsc-faq summary{cursor:pointer;color:var(--navy);font-weight:500;font-size:17px}
.hsc .hsc-faq p{margin:12px 0 0}

.hsc .hsc-reveal{opacity:0;transform:translateY(18px);transition:.6s}.hsc .hsc-reveal.visible{opacity:1;transform:none}

@media(max-width:1100px){.hsc .hsc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){
 .hsc .hsc-hero-grid{grid-template-columns:1fr;gap:36px}
 .hsc .hsc-split{grid-template-columns:1fr;gap:30px}.hsc .hsc-split.rev .hsc-media{order:0}
 .hsc .hsc-media{height:auto;min-height:0;aspect-ratio:3/2}
 .hsc .hsc-steps{grid-template-columns:1fr}
 .hsc .hsc-final-grid{display:grid}
}
/* phones: the transparent desktop nav is hidden and the fixed 61px white bar takes over */
@media(max-width:800px){
 .hsc .hsc-hero{background-image:linear-gradient(180deg,rgba(4,18,42,.9),rgba(4,18,42,.82)),url(/app/images/en/new/hs-code-tariff/hs-code-tariff-hero-800.webp)}
 .hsc .hsc-hero:before{display:none}
 .hsc .hsc-hero-points{display:none}
 .hsc .hsc-hero-copy p{margin-bottom:0}
 .hsc .hsc-hero-grid{padding:calc(var(--nav-h-m) + 40px) 0 52px}
}
@media(max-width:620px){
 .hsc{font-size:16px}.hsc .hsc-wrap{width:calc(100% - 28px)}
 .hsc .hsc-hero h1{font-size:32px}
 .hsc .hsc-hero-copy p{font-size:16.5px}
 .hsc .hsc-tool{padding:24px 18px 20px}
 .hsc .hsc-sec{padding:58px 0}.hsc .hsc-final{padding:54px 0}
 .hsc .hsc-cards{grid-template-columns:1fr}
 .hsc .hsc-final-actions .hsc-btn{width:100%}
 /* results: each tariff line becomes a card; labels come from CSS so the server loop needs no change */
 .hsc .hsc-table-wrap{overflow:visible;border:0;box-shadow:none;background:none}
 .hsc .hsc-table{min-width:0}
 .hsc .hsc-table thead{display:none}
 .hsc .hsc-table,.hsc .hsc-table tbody,.hsc .hsc-table tr,.hsc .hsc-table td{display:block;width:100%}
 .hsc .hsc-table tr{margin:0 0 12px;border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:0 0 12px 12px;background:#fff;overflow:hidden}
 .hsc .hsc-table tbody tr:nth-child(even) td{background:#fff}
 .hsc .hsc-table td{display:flex;justify-content:space-between;gap:14px;max-width:none!important;padding:10px 14px;white-space:normal!important;text-align:right}
 .hsc .hsc-table td:before{flex:0 0 auto;color:var(--muted);font:500 13px/1.5 Inter,Arial,sans-serif;text-align:left}
 .hsc .hsc-table td:nth-child(1):before{content:"HS Code"}
 .hsc .hsc-table td:nth-child(2){display:block;text-align:left}
 .hsc .hsc-table td:nth-child(2):before{content:"Description";display:block;margin-bottom:2px}
 .hsc .hsc-table td:nth-child(3):before{content:"Similarity (%)"}
 .hsc .hsc-table td:nth-child(4):before{content:"Basic Tax Rate"}
 .hsc .hsc-table td:nth-child(5):before{content:"Section 301"}
 .hsc .hsc-table td:nth-child(6):before{content:"Fentanyl Policy"}
 .hsc .hsc-table td:nth-child(7):before{content:"Reciprocal Tariff"}
 .hsc .hsc-table tbody tr:last-child td{border-bottom:1px solid var(--line)}
 .hsc .hsc-table tr td:last-child{border-bottom:0!important}
}
@media(prefers-reduced-motion:reduce){.hsc *{transition:none!important}.hsc .hsc-reveal{opacity:1;transform:none}}

.hsc h1 em,.hsc h2 em,.hsc h3 em{color:#f5651b;font-family:inherit;font-size:inherit;font-weight:inherit;font-style:normal;line-height:inherit;letter-spacing:inherit}
.hsc .hsc-copy a,.hsc .hsc-faq a,.hsc .hsc-note a,.hsc .hsc-source a,.hsc .hsc-final a:not(.hsc-btn){text-decoration:underline!important;text-underline-offset:3px}