/* PepperScale — Heat Chart Opt-in. Scope: .hco
   Server-rendered; brand palette chili-red #b3261e / paper #faf6f0 / ink #2a2320.
   Four layouts: .hco-inline (banner), .hco-compact (slim), .hco-sidebar (narrow column), .hco-landing (hero). */

.hco{font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;color:#2a2320;margin:22px 0;}
.hco *{box-sizing:border-box;}
.hco img{max-width:100%;height:auto;display:block;}

.hco-card{background:#faf6f0;border:1px solid #e7ddd2;border-top:4px solid #b3261e;border-radius:14px;
	box-shadow:0 2px 14px rgba(42,35,32,.06);}

.hco-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#b3261e;margin:0 0 8px;}
.hco-title{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.16;color:#2a2320;margin:0 0 8px;}
.hco-sub{font-size:15px;line-height:1.5;color:#6b615a;margin:0;}
.hco-note{font-size:12px;line-height:1.4;color:#8a8079;margin:10px 0 0;}

/* benefits (landing) */
.hco-benefits{list-style:none;padding:0;margin:16px 0;}
.hco-benefits li{position:relative;padding-left:26px;margin:7px 0;font-size:15px;color:#3a322c;}
.hco-benefits li::before{content:"\2713";position:absolute;left:0;top:0;color:#2f7d54;font-weight:800;}

/* form — styles both the native form and a pasted ESP form in .hco-form-slot */
.hco-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.hco-input,
.hco-form-slot input[type="email"],
.hco-form-slot input[type="text"],
.hco-form-slot input:not([type]){flex:1 1 220px;min-width:0;width:100%;font:inherit;font-size:15px;
	padding:12px 14px;border:1px solid #d9cdbd;border-radius:9px;background:#fff;color:#2a2320;line-height:1.2;}
.hco-input:focus,
.hco-form-slot input[type="email"]:focus,
.hco-form-slot input[type="text"]:focus,
.hco-form-slot input:not([type]):focus{outline:none;border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.15);}
.hco-input::placeholder{color:#9a9089;}

.hco-btn,
.hco-form-slot button,
.hco-form-slot input[type="submit"]{flex:0 0 auto;font:inherit;font-size:15px;font-weight:700;
	padding:12px 22px;border:0;border-radius:9px;background:#b3261e;color:#fff;cursor:pointer;
	line-height:1.2;transition:background .15s ease;
	display:inline-flex;align-items:center;justify-content:center;text-align:center;}
.hco-btn:hover,
.hco-form-slot button:hover,
.hco-form-slot input[type="submit"]:hover{background:#8a1c16;}

.hco-empty{font-size:13px;line-height:1.45;color:#8a1c16;background:#fdeceb;border:1px dashed #e3a8a3;
	border-radius:9px;padding:11px 13px;margin-top:14px;}
.hco-empty code{background:rgba(138,28,22,.1);padding:1px 5px;border-radius:4px;font-size:12px;}

/* honeypot — visually gone but still present in the DOM for bots to fill */
.hco-hp{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden;}

/* submission states */
.hco-success{background:#eaf5ee;border:1px solid #bfe0cd;color:#2f7d54;border-radius:10px;
	padding:14px 16px;margin-top:16px;font-size:15px;font-weight:600;line-height:1.4;}
.hco-err{background:#fdeceb;border:1px solid #e3a8a3;color:#8a1c16;border-radius:8px;
	padding:9px 12px;margin:0 0 10px;font-size:13px;line-height:1.4;}

/* ---------- INLINE (default banner) ---------- */
.hco-inline .hco-card{display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:center;padding:24px 28px;}
.hco-inline .hco-visual{align-self:center;}
.hco-inline .hco-title{font-size:22px;}
.hco-inline .hco-form{display:block;}

/* ---------- COMPACT (slim, post-tool / sidebar) ---------- */
.hco-compact .hco-card{padding:18px 20px;border-radius:12px;}
.hco-compact .hco-visual{display:none;}
.hco-compact .hco-title{font-size:18px;}
.hco-compact .hco-sub{font-size:14px;}

/* ---------- SIDEBAR (narrow column, runs site-wide) ---------- */
.hco-sidebar .hco-card{padding:20px 18px;border-radius:12px;text-align:center;}
.hco-sidebar .hco-visual{max-width:168px;margin:0 auto 14px;}
.hco-sidebar .hco-title{font-size:18px;line-height:1.2;}
.hco-sidebar .hco-sub{font-size:13.5px;}
.hco-sidebar .hco-form{display:block;margin-top:14px;}
.hco-sidebar .hco-note{font-size:11.5px;}
.hco-sidebar .hco-success,
.hco-sidebar .hco-err{text-align:left;}

/* ---------- LANDING (dedicated hero) ---------- */
.hco-landing .hco-card{max-width:780px;margin:0 auto;text-align:center;padding:42px 38px;}
.hco-landing .hco-visual{max-width:360px;margin:0 auto 22px;}
.hco-landing .hco-title{font-size:31px;}
.hco-landing .hco-sub{font-size:16px;max-width:560px;margin:0 auto;}
.hco-landing .hco-benefits{display:inline-block;text-align:left;margin:20px auto;}
.hco-landing .hco-form{max-width:480px;margin:18px auto 0;display:block;}
/* stacked forms (inline, sidebar, landing): plain block stacking — robust
   everywhere, with no flex-direction quirks around the absolute honeypot field */
.hco-inline .hco-input,
.hco-sidebar .hco-input,
.hco-landing .hco-input{display:block;width:100%;}
.hco-inline .hco-btn,
.hco-sidebar .hco-btn,
.hco-landing .hco-btn{display:flex;width:100%;margin-top:10px;}
.hco-landing .hco-note{max-width:480px;margin:10px auto 0;}

/* ---------- responsive ---------- */
@media (max-width:640px){
	.hco-inline .hco-card{grid-template-columns:1fr;gap:18px;text-align:center;padding:22px 20px;}
	.hco-inline .hco-visual{max-width:230px;margin:0 auto;}
	.hco-inline .hco-form{justify-content:center;}
	.hco-landing .hco-card{padding:30px 22px;}
	.hco-landing .hco-title{font-size:25px;}
	.hco-btn,
	.hco-form-slot button,
	.hco-form-slot input[type="submit"]{flex:1 1 100%;}
}