/* Hemjey Agreement System — premium responsive frontend */
#hti-agreement-form,
#hti-agreement-form *,
.hti-agreement-app,
.hti-agreement-app * { box-sizing:border-box; }

.hti-agreement-app {
    --hti-blue:#0b5ed7;
    --hti-blue-2:#2563eb;
    --hti-blue-dark:#073b8f;
    --hti-red:#e63946;
    --hti-red-dark:#b42318;
    --hti-ink:#0f172a;
    --hti-muted:#64748b;
    --hti-border:#e2e8f0;
    --hti-soft:#f5f8fc;
    --hti-white:#fff;
    width:100%;
    max-width:1220px;
    margin:32px auto 60px;
    padding:0 18px;
    color:var(--hti-ink);
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:16px;
    line-height:1.55;
}

.hti-agreement-app input,
.hti-agreement-app textarea,
.hti-agreement-app button { font:inherit; }

.hti-hero { position:relative; overflow:hidden; color:#fff; border-radius:28px; background:linear-gradient(135deg,#062e78 0%,#0b5ed7 58%,#1849a9 100%); box-shadow:0 24px 60px rgba(7,59,143,.22); }
.hti-hero:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to right,black,transparent 80%); pointer-events:none; }
.hti-hero-inner { position:relative; z-index:2; padding:34px clamp(22px,5vw,58px) 44px; }
.hti-brand-line { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:800; letter-spacing:1.6px; opacity:.92; margin-bottom:36px; }
.hti-brand-dot { width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.12); }
.hti-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:40px; align-items:center; }
.hti-eyebrow { display:inline-flex; padding:7px 12px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(255,255,255,.1); font-size:11px; font-weight:800; letter-spacing:1.2px; }
.hti-hero h1 { margin:13px 0 8px; color:#fff; font-size:clamp(32px,5vw,54px); line-height:1.05; letter-spacing:-1.6px; }
.hti-hero p { max-width:700px; margin:0; color:rgba(255,255,255,.84); font-size:17px; }
.hti-trust-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:23px; }
.hti-trust-row span { padding:8px 11px; border-radius:9px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.13); font-size:12px; font-weight:700; }
.hti-price-box { position:relative; text-align:center; padding:23px 18px; border:1px solid rgba(255,255,255,.2); border-radius:20px; background:rgba(255,255,255,.11); backdrop-filter:blur(10px); }
.hti-price-box span,.hti-price-box small { display:block; color:rgba(255,255,255,.76); font-size:11px; font-weight:700; }
.hti-price-box strong { display:block; margin:4px 0; color:#fff; font-size:30px; line-height:1.15; }
.hti-glow-one,.hti-glow-two { position:absolute; border-radius:50%; filter:blur(5px); pointer-events:none; }
.hti-glow-one { width:280px; height:280px; right:-100px; top:-150px; background:rgba(230,57,70,.38); }
.hti-glow-two { width:230px; height:230px; left:-150px; bottom:-170px; background:rgba(255,255,255,.1); }

.hti-steps { display:grid; grid-template-columns:1fr 46px 1fr 46px 1fr; align-items:center; max-width:900px; margin:22px auto 28px; }
.hti-step { display:flex; align-items:center; gap:11px; min-width:0; padding:10px 8px; }
.hti-step > span { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:50%; background:#eaf1fb; color:var(--hti-blue); font-size:12px; font-weight:900; }
.hti-step b,.hti-step small { display:block; }
.hti-step b { font-size:13px; }
.hti-step small { color:var(--hti-muted); font-size:11px; }
.hti-step.is-active > span { color:#fff; background:var(--hti-blue); box-shadow:0 6px 16px rgba(11,94,215,.22); }
.hti-steps > i { height:1px; background:#dbe4f0; }

.hti-main-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
.hti-card { background:#fff; border:1px solid var(--hti-border); border-radius:22px; margin:0 0 22px; box-shadow:0 12px 35px rgba(15,23,42,.06); overflow:hidden; }
.hti-form-card,.hti-sign-card { padding:30px; }
.hti-section-head { display:flex; align-items:flex-start; gap:15px; margin-bottom:26px; }
.hti-section-icon { display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:14px; background:linear-gradient(135deg,#e7f0ff,#d7e7ff); color:var(--hti-blue); font-size:12px; font-weight:900; }
.hti-section-icon.blue { background:linear-gradient(135deg,#e8f0ff,#cfe0ff); }
.hti-section-icon.red { background:linear-gradient(135deg,#fff0f0,#ffe0e3); color:var(--hti-red); }
.hti-section-kicker,.hti-side-kicker { display:block; color:var(--hti-blue); font-size:10px; font-weight:900; letter-spacing:1.2px; }
.hti-section-head h2 { margin:2px 0 2px; font-size:22px; line-height:1.2; letter-spacing:-.4px; }
.hti-section-head p { margin:0; color:var(--hti-muted); font-size:13px; }

.hti-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.hti-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.hti-field-wide { grid-column:1/-1; }
.hti-field > span { font-size:12px; font-weight:800; color:#334155; }
.hti-field em { color:var(--hti-red); font-style:normal; }
.hti-field small { color:#94a3b8; font-size:10px; }
.hti-field input,.hti-field textarea { width:100%; min-width:0; border:1px solid #d8e0eb; border-radius:12px; background:#fbfdff; color:var(--hti-ink); padding:13px 14px; outline:none; transition:border-color .2s,box-shadow .2s,background .2s; }
.hti-field textarea { min-height:105px; resize:vertical; }
.hti-field input::placeholder,.hti-field textarea::placeholder { color:#a0aec0; }
.hti-field input:focus,.hti-field textarea:focus { border-color:var(--hti-blue); background:#fff; box-shadow:0 0 0 4px rgba(11,94,215,.09); }

.hti-document-card { padding:0; }
.hti-document-head { padding:30px 30px 20px; margin:0; border-bottom:1px solid var(--hti-border); align-items:center; }
.hti-document-badge { margin-left:auto; padding:7px 10px; border-radius:999px; background:#f1f5f9; color:#64748b; font-size:9px; font-weight:900; letter-spacing:.8px; white-space:nowrap; }
.hti-parties-box { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0 30px 24px; border:1px solid var(--hti-border); border-radius:15px; overflow:hidden; background:var(--hti-border); }
.hti-party { min-width:0; padding:14px 15px; background:#f8fafc; }
.hti-party span { display:block; color:#94a3b8; font-size:9px; font-weight:900; letter-spacing:.8px; text-transform:uppercase; margin-bottom:3px; }
.hti-party strong { display:block; overflow-wrap:anywhere; font-size:12px; }
.hti-document { padding:0 30px 30px; }
.hti-document .hti-lead { margin:0 0 20px; padding:17px 18px; border-left:4px solid var(--hti-blue); border-radius:0 12px 12px 0; background:#f5f9ff; color:#334155; font-size:13px; }
.hti-clause { padding:20px 0; border-bottom:1px solid #edf1f6; }
.hti-clause:last-child { border-bottom:0; }
.hti-clause h3 { display:flex; align-items:center; gap:11px; margin:0 0 8px; color:#102a5e; font-size:15px; line-height:1.3; }
.hti-clause h3 span { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:9px; background:#eef4ff; color:var(--hti-blue); font-size:10px; font-weight:900; }
.hti-clause p,.hti-clause li { color:#475569; font-size:13px; line-height:1.78; }
.hti-clause p { margin:0; }
.hti-clause ul { margin:7px 0 0; padding-left:22px; }
.hti-clause li { margin:5px 0; }

.hti-sign-card { padding-bottom:30px; }
.hti-signature-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }
.hti-client-sign-box,.hti-company-sign-box { padding:19px; border:1px solid var(--hti-border); border-radius:17px; background:#fbfdff; }
.hti-sign-box-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:16px; }
.hti-sign-box-head b,.hti-sign-box-head small { display:block; }
.hti-sign-box-head b { font-size:13px; }
.hti-sign-box-head small { color:#94a3b8; font-size:10px; margin-top:2px; }
.hti-sign-box-head > span { flex:none; padding:5px 7px; border-radius:999px; background:#fff0f0; color:var(--hti-red); font-size:8px; font-weight:900; }
.hti-company-sign-box .hti-sign-box-head > span { background:#eef4ff; color:var(--hti-blue); }
.hti-signature-wrap { position:relative; margin-top:12px; border:1px dashed #b8c4d3; border-radius:13px; background:#fff; overflow:hidden; }
#hti-client-signature { display:block; width:100%; height:180px; touch-action:none; cursor:crosshair; }
.hti-sign-placeholder { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#c0cad7; font-size:22px; font-weight:700; pointer-events:none; transition:opacity .2s; }
.hti-signature-wrap.has-ink .hti-sign-placeholder { opacity:0; }
.hti-sign-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:9px; color:#94a3b8; font-size:10px; font-weight:700; }
.hti-clear { border:1px solid #ffd4d1; background:#fff5f4; color:#c4322c; border-radius:8px; padding:7px 10px; font-size:10px; font-weight:800; cursor:pointer; }
.hti-clear:hover { background:#ffeceb; }
.hti-ceo-signature { height:145px; display:flex; align-items:center; justify-content:center; padding:10px; border:1px dashed #d5dce6; border-radius:12px; background:#fff; }
.hti-ceo-signature img { display:block; max-width:85%; max-height:100px; object-fit:contain; }
.hti-no-signature { text-align:center; color:#94a3b8; font-size:10px; line-height:1.6; }
.hti-company-line { border-bottom:1px solid #334155; margin:13px 0 8px; }
.hti-company-sign-box > strong,.hti-company-sign-box > small { display:block; }
.hti-company-sign-box > strong { font-size:11px; }
.hti-company-sign-box > small { color:#94a3b8; font-size:10px; }

.hti-accept { display:flex; align-items:flex-start; gap:12px; margin:20px 0; padding:15px; border:1px solid #dbe7f7; border-radius:13px; background:#f6faff; color:#475569; font-size:12px; cursor:pointer; }
.hti-accept input { width:19px; height:19px; flex:none; margin:1px 0 0; accent-color:var(--hti-blue); }
.hti-accept b { color:#1e293b; }
.hti-submit { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; border:0; border-radius:13px; padding:16px 22px; color:#fff; background:linear-gradient(135deg,var(--hti-blue),var(--hti-blue-dark)); box-shadow:0 10px 24px rgba(11,94,215,.2); font-size:13px; font-weight:900; letter-spacing:.3px; cursor:pointer; transition:transform .18s,box-shadow .18s,opacity .18s; }
.hti-submit b { font-size:19px; line-height:1; }
.hti-submit:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(11,94,215,.25); }
.hti-submit:disabled { opacity:.65; cursor:not-allowed; transform:none; }
.hti-result { display:none; margin-top:15px; padding:14px 16px; border-radius:12px; font-size:12px; line-height:1.6; }
.hti-result:not(:empty) { display:block; }
.hti-result.success { background:#ecfdf3; color:#067647; border:1px solid #abefc6; }
.hti-result.error { background:#fff5f4; color:#b42318; border:1px solid #fecdca; }

.hti-sidebar { position:sticky; top:25px; }
.hti-side-card { margin-bottom:15px; border:1px solid var(--hti-border); border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(15,23,42,.05); }
.hti-side-summary { padding:21px; background:linear-gradient(180deg,#fff,#f7faff); }
.hti-side-summary h3 { margin:5px 0 2px; font-size:17px; }
.hti-side-price { color:var(--hti-blue); font-size:25px; font-weight:900; }
.hti-side-divider { height:1px; margin:15px 0; background:var(--hti-border); }
.hti-side-summary ul { list-style:none; padding:0; margin:0; }
.hti-side-summary li { display:flex; gap:9px; margin:10px 0; color:#475569; font-size:11px; }
.hti-side-summary li span { color:#12b76a; font-weight:900; }
.hti-side-security { display:flex; gap:11px; padding:15px; background:#f0fdf4; border-color:#ccefd9; }
.hti-lock { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:9px; background:#dcfae6; color:#039855; font-weight:900; }
.hti-side-security b { display:block; font-size:11px; color:#166534; }
.hti-side-security p { margin:2px 0 0; color:#4b6352; font-size:10px; line-height:1.55; }
.hti-side-help { padding:17px; }
.hti-side-help span { display:block; color:var(--hti-red); font-size:9px; font-weight:900; letter-spacing:1px; }
.hti-side-help strong { display:block; margin-top:4px; font-size:13px; }
.hti-side-help p { margin:4px 0 0; color:#64748b; font-size:10px; line-height:1.6; }
.hti-footer-note { text-align:center; color:#94a3b8; font-size:10px; padding:7px 12px 0; }

@media (max-width:1050px) {
    .hti-main-layout { grid-template-columns:1fr; }
    .hti-sidebar { position:static; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
    .hti-side-card { margin:0; }
}

@media (max-width:760px) {
    .hti-agreement-app { margin:16px auto 40px; padding:0 10px; }
    .hti-hero { border-radius:20px; }
    .hti-hero-inner { padding:25px 20px 28px; }
    .hti-brand-line { margin-bottom:25px; font-size:9px; letter-spacing:1px; }
    .hti-hero-grid { grid-template-columns:1fr; gap:20px; }
    .hti-hero h1 { font-size:34px; letter-spacing:-1px; }
    .hti-hero p { font-size:14px; }
    .hti-price-box { text-align:left; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:15px; padding:15px; }
    .hti-price-box span { grid-column:1; grid-row:1; }
    .hti-price-box strong { grid-column:1; grid-row:2; }
    .hti-price-box small { grid-column:2; grid-row:2; align-self:end; }
    .hti-trust-row { gap:6px; }
    .hti-trust-row span { font-size:9px; padding:7px 8px; }
    .hti-steps { grid-template-columns:1fr; gap:5px; margin:16px 4px 20px; }
    .hti-step { padding:6px 0; }
    .hti-steps > i { display:none; }
    .hti-step > span { width:31px; height:31px; }
    .hti-step small { font-size:10px; }
    .hti-card { border-radius:17px; margin-bottom:15px; }
    .hti-form-card,.hti-sign-card { padding:19px 15px; }
    .hti-section-head { gap:10px; margin-bottom:20px; }
    .hti-section-icon { width:39px; height:39px; border-radius:11px; }
    .hti-section-head h2 { font-size:18px; }
    .hti-section-head p { font-size:11px; }
    .hti-grid { grid-template-columns:1fr; gap:13px; }
    .hti-field-wide { grid-column:auto; }
    .hti-document-head { padding:20px 15px 15px; }
    .hti-document-badge { display:none; }
    .hti-parties-box { grid-template-columns:1fr; margin:0 15px 17px; }
    .hti-party { padding:11px 13px; }
    .hti-document { padding:0 15px 20px; }
    .hti-document .hti-lead { font-size:12px; }
    .hti-clause { padding:15px 0; }
    .hti-clause h3 { font-size:13px; }
    .hti-clause p,.hti-clause li { font-size:12px; line-height:1.7; }
    .hti-signature-grid { grid-template-columns:1fr; }
    #hti-client-signature { height:155px; }
    .hti-sidebar { grid-template-columns:1fr; }
}

@media (max-width:420px) {
    .hti-hero h1 { font-size:29px; }
    .hti-brand-line { align-items:flex-start; }
    .hti-trust-row span:nth-child(3) { display:none; }
    .hti-sign-box-head { flex-direction:column; }
    .hti-sign-box-head > span { align-self:flex-start; }
}

/* v1.2.0 email/PDF result states */
.hti-email-success{color:#147a4a}.hti-email-warning{color:#9a3412}.hti-download-link{display:inline-block;margin-top:10px;font-weight:700}