/* ============================================================
   ESA Letter Renewal landing page
   ----------------------------------------------------------
   Design tokens (--color-*, --space-*, --font-*, --text-*,
   --weight-*, --leading-*, --tracking-*, --radius-*,
   --shadow-*, --transition-*) come from css/style.css.
   ============================================================ */

.esa-renewal-page *, .esa-renewal-page *::before, .esa-renewal-page *::after { box-sizing:border-box; margin:0; padding:0; }
.esa-renewal-page { font-family:var(--font-sans); font-size:var(--text-lg); line-height:var(--leading-body); color:var(--color-text-body); background:var(--color-bg-white); -webkit-font-smoothing:antialiased; }
.esa-renewal-page .container { max-width:1200px; margin:0 auto; padding:0 var(--space-8); }

/* CTA buttons — hover behavior matches landing-page .cta-btn (lift UP, no border-bottom trick) */
.esa-renewal-page .btn-primary { display:inline-flex; align-items:center; gap:var(--space-2); padding:13px 40px 14px; background:var(--color-orange); color:#fff; font-family:var(--font-sans); font-size:var(--text-lg); font-weight:var(--weight-bold); border-radius:var(--radius-full); border:none; cursor:pointer; box-shadow:var(--shadow-cta); transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), background var(--transition-fast); text-decoration:none; white-space:nowrap; }
.esa-renewal-page .btn-primary:hover { background:var(--color-orange-hover); box-shadow:var(--shadow-cta-hover); transform:translateY(-2px); color:#fff; text-decoration:none; }
.esa-renewal-page .btn-primary svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.esa-renewal-page .btn-steps { display:inline-flex; align-items:center; gap:var(--space-2); padding:13px 40px 14px; background:var(--color-orange); color:#fff; font-family:var(--font-sans); font-size:var(--text-lg); font-weight:var(--weight-bold); border-radius:var(--radius-full); border:none; cursor:pointer; box-shadow:var(--shadow-cta); transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), background var(--transition-fast); text-decoration:none; white-space:nowrap; }
.esa-renewal-page .btn-steps:hover { background:var(--color-orange-hover); box-shadow:var(--shadow-cta-hover); transform:translateY(-2px); color:#fff; text-decoration:none; }
.esa-renewal-page .btn-steps svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.esa-renewal-page .btn-inline { display:inline-flex; align-items:center; gap:var(--space-2); padding:10px 22px 11px; background:var(--color-orange); color:#fff; font-family:var(--font-sans); font-size:var(--text-md); font-weight:var(--weight-bold); letter-spacing:0.01em; border-radius:var(--radius-full); border:none; cursor:pointer; box-shadow:var(--shadow-cta); transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), background var(--transition-fast); text-decoration:none; white-space:nowrap; -webkit-font-smoothing:antialiased; }
.esa-renewal-page .btn-inline:hover { background:var(--color-orange-hover); transform:translateY(-2px); box-shadow:var(--shadow-cta-hover); color:#fff !important; text-decoration:none; }
.esa-renewal-page a.btn-inline, .esa-renewal-page .body-text a.btn-inline { color:#fff !important; border-bottom:none; }

.esa-renewal-page .eyebrow { font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-orange); display:inline-flex; align-items:center; gap:6px; }
.esa-renewal-page .eyebrow::before { content:''; width:20px; height:2px; background:var(--color-orange); border-radius:1px; flex-shrink:0; }

.esa-renewal-page .section-heading-above { margin-bottom:var(--space-8); }
.esa-renewal-page .sec-head-mb { margin-bottom:var(--space-8); }
.esa-renewal-page .h2-bar-mt { margin-top:var(--space-4); }
.esa-renewal-page .sec { padding:96px 0; }
.esa-renewal-page .sec-sm { padding:72px 0; }
.esa-renewal-page .sec-white { background:var(--color-bg-white); }
.esa-renewal-page .sec-warm { background:var(--color-bg-warm); }
.esa-renewal-page .sec-head { margin-bottom:var(--space-10); }
.esa-renewal-page .sec-head .eyebrow { margin-bottom:var(--space-4); }
.esa-renewal-page .sec-head h2 { font-family:var(--font-serif); font-weight:var(--weight-regular); font-size:clamp(28px,3vw,40px); color:var(--color-text-heading); letter-spacing:var(--tracking-tight); line-height:var(--leading-tight); margin-bottom:var(--space-4); }
.esa-renewal-page .sec-head p { font-family:var(--font-sans); font-size:var(--text-lg); color:var(--color-text-body); max-width:640px; line-height:var(--leading-body); }
.esa-renewal-page .sec-head.centered { text-align:center; }
.esa-renewal-page .sec-head.centered p { margin:0 auto; }
.esa-renewal-page .h2-bar { display:flex; align-items:flex-start; gap:14px; }
.esa-renewal-page .h2-bar::before { content:''; display:block; flex-shrink:0; width:4px; height:36px; margin-top:5px; background:var(--color-orange); border-radius:2px; }
.esa-renewal-page h3.subhead { font-family:var(--font-sans); font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--color-text-heading); margin:var(--space-6) 0 var(--space-4); line-height:var(--leading-snug); padding-left:var(--space-4); border-left:3px solid var(--color-orange); }
.esa-renewal-page .body-text p { font-family:var(--font-sans); font-size:var(--text-lg); line-height:var(--leading-body); color:var(--color-text-body); margin-bottom:var(--space-5); max-width:68ch; }
.esa-renewal-page .body-text p:last-child { margin-bottom:0; }
.esa-renewal-page .body-text a { color:var(--color-orange); border-bottom:1px solid rgba(255,91,46,.25); font-weight:var(--weight-medium); text-decoration:none; }
.esa-renewal-page .body-text a:hover { border-bottom-color:var(--color-orange); }

.esa-renewal-page .hero { background:var(--color-bg-warm); position:relative; overflow:hidden; }
.esa-renewal-page .hero::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--color-orange); z-index:2; }
.esa-renewal-page .hero-grid { display:grid; grid-template-columns:1fr 420px; min-height:540px; max-width:1200px; margin:0 auto; padding-left:var(--space-8); padding-top: 70px}
.esa-renewal-page .hero-left { padding:64px var(--space-16) 56px 0; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; }
.esa-renewal-page .hero-crumb { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-family:var(--font-sans); font-size:var(--text-xs); color:var(--color-text-secondary); margin-bottom:var(--space-5); }
.esa-renewal-page .hero-crumb a { color:var(--color-text-secondary); text-decoration:none; font-weight:var(--weight-medium); padding:2px 5px; border-radius:var(--radius-sm); transition:color var(--transition-fast); }
.esa-renewal-page .hero-crumb a:hover { color:var(--color-orange); }
.esa-renewal-page .crumb-sep { color:var(--color-text-disabled); font-size:11px; }
.esa-renewal-page .hero-crumb strong { color:var(--color-orange); font-weight:var(--weight-bold); background:rgba(255,91,46,.08); padding:2px 8px; border-radius:var(--radius-full); }
.esa-renewal-page .hero-h1 { font-family:var(--font-serif); font-weight:var(--weight-regular); font-size:clamp(34px,4vw,50px); color:var(--color-text-heading); letter-spacing:var(--tracking-tight); line-height:var(--leading-tight); margin-bottom:var(--space-4); }
.esa-renewal-page .hero-h1 .kw { color:var(--color-orange); }
.esa-renewal-page .hero-sub { font-family:var(--font-sans); font-size:var(--text-lg); line-height:var(--leading-body); color:var(--color-text-body); max-width:520px; margin-bottom:var(--space-6); }
.esa-renewal-page .hero-bullets { list-style:none; display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-8); }
.esa-renewal-page .hero-bullets li { display:flex; align-items:flex-start; gap:var(--space-3); font-family:var(--font-sans); font-size:var(--text-md); font-weight:var(--weight-medium); color:var(--color-text-body); line-height:var(--leading-snug); }
.esa-renewal-page .hbi { width:20px; height:20px; border-radius:50%; background:rgba(255,91,46,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.esa-renewal-page .hbi svg { width:10px; height:10px; stroke:var(--color-orange); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.esa-renewal-page .hero-cta-row { display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-6); }
.esa-renewal-page .hero-refund { font-family:var(--font-sans); font-size:var(--text-sm); color:var(--color-text-secondary); display:flex; align-items:center; gap:5px; }
.esa-renewal-page .hero-refund svg { width:13px; height:13px; stroke:#22c55e; fill:none; stroke-width:2; flex-shrink:0; }
.esa-renewal-page .hero-proof { display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; padding-top:var(--space-5); border-top:1px solid var(--color-border); }
.esa-renewal-page .hero-proof-stars { color:#F59E0B; font-size:14px; letter-spacing:1.5px; }
.esa-renewal-page .hero-proof-copy { font-family:var(--font-sans); font-size:var(--text-sm); color:var(--color-text-secondary); }
.esa-renewal-page .hero-proof-copy strong { color:var(--color-text-heading); font-weight:var(--weight-bold); }
.esa-renewal-page .hero-proof-sep { width:1px; height:18px; background:var(--color-border-strong); }
.esa-renewal-page .hero-right { display:flex; align-items:center; justify-content:center; padding:var(--space-12) var(--space-8); }
.esa-renewal-page .validity-card { background:var(--color-bg-white); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); border:1px solid var(--color-border); overflow:hidden; width:100%; max-width:360px; }
.esa-renewal-page .validity-card-hd { padding:var(--space-5) var(--space-6); background:var(--color-bg-warm); border-bottom:1px solid var(--color-border); }
.esa-renewal-page .validity-card-hd-label { font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-text-secondary); margin-bottom:var(--space-2); }
.esa-renewal-page .validity-card-hd h3 { font-family:var(--font-serif); font-size:var(--text-xl); color:var(--color-text-heading); font-weight:var(--weight-regular); letter-spacing:var(--tracking-tight); line-height:var(--leading-tight); }
.esa-renewal-page .validity-timeline { padding:var(--space-6); }
.esa-renewal-page .vt-track { position:relative; margin-bottom:var(--space-5); }
.esa-renewal-page .vt-bar-bg { height:8px; background:var(--color-border); border-radius:4px; overflow:hidden; }
.esa-renewal-page .vt-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg, #22c55e 0%, #F59E0B 60%, var(--color-orange) 100%); width:100%; }
.esa-renewal-page .vt-marker { position:absolute; top:-4px; left:78%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; background:var(--color-orange); border:3px solid #fff; box-shadow:0 0 0 2px var(--color-orange); }
.esa-renewal-page .vt-labels { position:relative; height:18px; margin-top:var(--space-2); }
.esa-renewal-page .vt-label { font-family:var(--font-sans); font-size:10px; color:var(--color-text-disabled); position:absolute; transform:translateX(-50%); white-space:nowrap; }
.esa-renewal-page .vt-label.active { color:var(--color-orange); font-weight:var(--weight-bold); }
.esa-renewal-page .validity-rows { padding:0 var(--space-6) var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); }
.esa-renewal-page .validity-row { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); background:var(--color-bg-warm); border:1px solid var(--color-border); }
.esa-renewal-page .validity-row.warn { background:rgba(255,91,46,.05); border-color:rgba(255,91,46,.2); }
.esa-renewal-page .validity-row.safe { background:rgba(34,197,94,.05); border-color:rgba(34,197,94,.2); }
.esa-renewal-page .vr-label { font-family:var(--font-sans); font-size:var(--text-xs); color:var(--color-text-secondary); }
.esa-renewal-page .vr-value { font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--color-text-heading); }
.esa-renewal-page .vr-value.amber { color:var(--color-orange); }.esa-renewal-page .validity-card-hd::after
.esa-renewal-page .vr-value.green { color:#15803d; }
.esa-renewal-page .validity-card-ft { padding:var(--space-4) var(--space-6); background:var(--color-bg-peach); border-top:1px solid rgba(255,91,46,.15); display:flex; align-items:center; gap:var(--space-3); }
.esa-renewal-page .validity-card-ft-icon { width:32px; height:32px; border-radius:50%; background:var(--color-orange); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.esa-renewal-page .validity-card-ft-icon svg { width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.esa-renewal-page .validity-card-ft-text { font-family:var(--font-sans); font-size:var(--text-xs); color:var(--color-text-body); line-height:var(--leading-snug); }
.esa-renewal-page .validity-card-ft-text strong { display:block; font-weight:var(--weight-bold); color:var(--color-text-heading); margin-bottom:1px; }

.esa-renewal-page .why-grid { display:grid; grid-template-columns:1fr 360px; gap:var(--space-12) var(--space-16); align-items:start; }
.esa-renewal-page .why-body .subhead { margin-top:var(--space-6); }
.esa-renewal-page .why-body .subhead:first-of-type { margin-top:var(--space-6); }
.esa-renewal-page .why-sidebar { position:sticky; top:100px; }
.esa-renewal-page .urgency-card { background:var(--color-bg-white); border:1px solid var(--color-border-strong); border-radius:var(--radius-xl);box-shadow:var(--shadow-sm); }
.esa-renewal-page .urgency-card-hd { border-top-left-radius: 20px; padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--color-border); background:var(--color-bg-warm); }
.esa-renewal-page .urgency-card-hd p { font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-text-secondary); margin-bottom:4px; }
.esa-renewal-page .urgency-card-hd h3 { font-family:var(--font-serif); font-size:var(--text-xl); color:var(--color-text-heading); font-weight:var(--weight-regular); letter-spacing:var(--tracking-tight); line-height:var(--leading-tight); }
.esa-renewal-page .urgency-card-bd { padding:var(--space-5) var(--space-6); }
.esa-renewal-page .urgency-row { display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-3) 0; border-bottom:1px solid var(--color-border); }
.esa-renewal-page .urgency-row:last-of-type { border-bottom:none; }
.esa-renewal-page .urgency-icon { width:28px; height:28px; border-radius:var(--radius-md); background:var(--color-bg-peach); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.esa-renewal-page .urgency-copy strong { display:block; font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--color-text-heading); margin-bottom:2px; }
.esa-renewal-page .urgency-copy p { font-family:var(--font-sans); font-size:var(--text-xs); color:var(--color-text-secondary); line-height:var(--leading-body); margin:0; }
.esa-renewal-page .urgency-card-ft { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding:var(--space-4) var(--space-6); background:var(--color-bg-warm); border-top:1px solid var(--color-border); font-family:var(--font-sans); font-size:var(--text-xs); color:var(--color-text-secondary); line-height:var(--leading-body); }
.esa-renewal-page .sec-inline-cta { margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--color-border); }
.esa-renewal-page .btn-arrow { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.esa-renewal-page .benefits-card-ft { padding:var(--space-4) var(--space-6); background:var(--color-bg-warm); border-top:1px solid var(--color-border); font-family:var(--font-sans); font-size:var(--text-xs); color:var(--color-text-secondary); line-height:var(--leading-body); }
.esa-renewal-page .inline-cta-row { margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--color-border); display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.esa-renewal-page .cta-helper { font-family:var(--font-sans); font-size:var(--text-sm); color:var(--color-text-secondary); }

.esa-renewal-page .steps-track { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-bottom:var(--space-10); position:relative; max-width:960px; margin-left:auto; margin-right:auto; }
.esa-renewal-page .steps-track::before { content:''; position:absolute; top:52px; left:calc(12.5% + 28px); right:calc(12.5% + 28px); height:2px; background:rgba(255,91,46,.35); z-index:0; }
.esa-renewal-page .step-card { background:var(--color-bg-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6) var(--space-5) var(--space-6); text-align:center; position:relative; z-index:1; box-shadow:var(--shadow-xs); transition:box-shadow var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal); }
.esa-renewal-page .step-card:hover { box-shadow:var(--shadow-md); border-color:rgba(255,91,46,.25); transform:translateY(-3px); }
.esa-renewal-page .step-ring { width:56px; height:56px; border-radius:50%; border:2px solid var(--color-border); background:var(--color-bg-warm); display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-4); position:relative; z-index:1; transition:border-color var(--transition-normal), background var(--transition-normal); }
.esa-renewal-page .step-ring-inner { width:36px; height:36px; border-radius:50%; background:var(--color-orange); color:#fff; font-family:var(--font-sans); font-size:var(--text-lg); font-weight:var(--weight-bold); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(255,91,46,.3); }
.esa-renewal-page .step-card:hover .step-ring { border-color:var(--color-orange); background:var(--color-bg-peach); }
.esa-renewal-page .step-card-title { font-family:var(--font-sans); font-size:var(--text-md); font-weight:var(--weight-bold); color:var(--color-text-heading); margin-bottom:var(--space-2); line-height:var(--leading-snug); }
.esa-renewal-page .step-card-body { font-family:var(--font-sans); font-size:var(--text-sm); color:var(--color-text-secondary); line-height:var(--leading-body); }
.esa-renewal-page .step-cred-badge { display:inline-block; margin-top:var(--space-3); font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--color-orange); background:rgba(255,91,46,.07); border:1px solid rgba(255,91,46,.18); padding:4px 12px; border-radius:var(--radius-full); }
.esa-renewal-page .step-payment { border-left:3px solid var(--color-orange); padding-left:calc(var(--space-5) - 2px); }
.esa-renewal-page .step-price-badge { display:inline-flex; align-items:center; gap:4px; margin-top:var(--space-3); font-family:var(--font-sans); font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--color-orange); background:rgba(255,91,46,.07); border:1px solid rgba(255,91,46,.18); padding:5px 14px; border-radius:var(--radius-full); }
.esa-renewal-page .steps-brand-note { max-width:580px; margin:0 auto var(--space-4); text-align:center; font-family:var(--font-sans); font-size:var(--text-md); color:var(--color-text-secondary); line-height:var(--leading-body); }
.esa-renewal-page .steps-brand-note strong { color:var(--color-text-heading); }
.esa-renewal-page .steps-state-note { max-width:640px; margin:0 auto var(--space-6); text-align:center; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--color-text-secondary); }
.esa-renewal-page .steps-state-note a { color:var(--color-orange); border-bottom:1px solid rgba(255,91,46,.25); font-weight:var(--weight-medium); text-decoration:none; }
.esa-renewal-page .steps-cta { text-align:center; padding-top:var(--space-6); border-top:1px solid var(--color-border); margin-top:var(--space-2); max-width:580px; margin-left:auto; margin-right:auto; }
.esa-renewal-page .steps-refund { font-family:var(--font-sans); font-size:var(--text-sm); color:var(--color-text-secondary); margin-top:var(--space-2); display:flex; align-items:center; justify-content:center; gap:var(--space-2); }
.esa-renewal-page .steps-refund svg { width:15px; height:15px; stroke:#22c55e; fill:none; stroke-width:2.5; flex-shrink:0; }

.esa-renewal-page .expiry-grid { display:grid; grid-template-columns:1fr 340px; gap:var(--space-12) var(--space-16); align-items:start; }
.esa-renewal-page .benefits-card { background:var(--color-bg-white); border:1px solid var(--color-border-strong); border-radius:var(--radius-xl); overflow:hidden; position:sticky; box-shadow:var(--shadow-sm); }
.esa-renewal-page .benefits-card-hd { padding:var(--space-5) var(--space-6); background:var(--color-bg-warm); border-bottom:1px solid var(--color-border); }
.esa-renewal-page .benefits-card-hd p { font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-text-secondary); margin-bottom:4px; }
.esa-renewal-page .benefits-card-hd h3 { font-family:var(--font-serif); font-size:var(--text-xl); color:var(--color-text-heading); font-weight:var(--weight-regular); letter-spacing:var(--tracking-tight); line-height:var(--leading-tight); }
.esa-renewal-page .benefits-card-bd { padding:var(--space-5) var(--space-6); }
.esa-renewal-page .benefit-row { display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4) 0; border-bottom:1px solid var(--color-border); }
.esa-renewal-page .benefit-row:last-of-type { border-bottom:none; }
.esa-renewal-page .benefit-check { width:22px; height:22px; border-radius:50%; background:rgba(34,197,94,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.esa-renewal-page .benefit-check svg { width:10px; height:10px; stroke:#15803d; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.esa-renewal-page .benefit-txt { font-family:var(--font-sans); font-size:var(--text-sm); color:var(--color-text-body); line-height:var(--leading-snug); }

.esa-renewal-page .air-travel-section { background:var(--color-bg-warm); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.esa-renewal-page .air-block { max-width:720px; margin:0 auto; }
.esa-renewal-page .air-intro { font-family:var(--font-sans); font-size:var(--text-lg); line-height:var(--leading-body); color:var(--color-text-body); margin-bottom:var(--space-6); }
.esa-renewal-page .air-callout { border-left:4px solid var(--color-orange); padding:var(--space-4) var(--space-5); background:rgba(255,91,46,.04); border-radius:0 var(--radius-md) var(--radius-md) 0; margin-bottom:var(--space-8); }
.esa-renewal-page .air-callout-label { font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-orange); margin-bottom:var(--space-4); display:flex; align-items:center; gap:var(--space-2); }
.esa-renewal-page .air-callout-label svg { width:13px; height:13px; stroke:var(--color-orange); fill:none; stroke-width:2; flex-shrink:0; }
.esa-renewal-page .air-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.esa-renewal-page .air-list li { display:flex; align-items:flex-start; gap:var(--space-3); font-family:var(--font-sans); font-size:var(--text-md); color:var(--color-text-body); line-height:var(--leading-snug); }
.esa-renewal-page .air-list li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--color-orange); flex-shrink:0; margin-top:6px; }
.esa-renewal-page .air-upsell-strip { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); background:var(--color-bg-peach); border:1px solid rgba(255,91,46,.2); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); }
.esa-renewal-page .air-upsell-text { flex:1; }
.esa-renewal-page .air-upsell-label { font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-orange); margin-bottom:var(--space-2); }
.esa-renewal-page .air-upsell-copy { font-family:var(--font-sans); font-size:var(--text-md); color:var(--color-text-heading); font-weight:var(--weight-medium); line-height:var(--leading-snug); margin:0; }
.esa-renewal-page .btn-upsell-strip { display:inline-flex; align-items:center; gap:var(--space-2); padding:11px 22px 12px; background:#fff; color:var(--color-orange); font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-bold); border-radius:var(--radius-full); border:1.5px solid var(--color-orange); text-decoration:none; white-space:nowrap; flex-shrink:0; transition:all var(--transition-normal); }
.esa-renewal-page .btn-upsell-strip:hover { background:var(--color-orange); color:#fff; text-decoration:none; }
.esa-renewal-page .btn-upsell-strip svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:600px) { .esa-renewal-page .air-upsell-strip { flex-direction:column; align-items:flex-start; } }

.esa-renewal-page .faq-wrap { max-width:780px; margin:0 auto; }
.esa-renewal-page .faq-item { border:1px solid var(--color-border); border-radius:var(--radius-lg); margin-bottom:var(--space-3); overflow:hidden; box-shadow:var(--shadow-xs); transition:border-color var(--transition-normal), box-shadow var(--transition-normal); }
.esa-renewal-page .faq-item:hover { border-color:rgba(255,91,46,.25); }
.esa-renewal-page .faq-item.open { border-color:rgba(255,91,46,.3); box-shadow:var(--shadow-sm); }
.esa-renewal-page .faq-item.core { border-color:var(--color-border-strong); background:var(--color-bg-warm); }
.esa-renewal-page .faq-btn { width:100%; background:none; border:none; padding:var(--space-5); display:flex; align-items:center; gap:var(--space-4); cursor:pointer; text-align:left; font-family:var(--font-sans); font-size:var(--text-md); font-weight:var(--weight-bold); color:var(--color-text-heading); line-height:var(--leading-snug); transition:color var(--transition-fast); }
.esa-renewal-page .faq-btn:hover { color:var(--color-orange); }
.esa-renewal-page .faq-item.open .faq-btn { color:var(--color-orange); }
.esa-renewal-page .faq-num { font-size:var(--text-xs); font-weight:var(--weight-bold); color:#fff; background:var(--color-orange); padding:2px 8px; border-radius:var(--radius-full); flex-shrink:0; min-width:28px; text-align:center; }
.esa-renewal-page .faq-btn-txt { flex:1; }
.esa-renewal-page .faq-chev { width:32px; height:32px; border-radius:50%; flex-shrink:0; background:var(--color-bg-peach); display:flex; align-items:center; justify-content:center; transition:background var(--transition-fast); }
.esa-renewal-page .faq-chev svg { width:14px; height:14px; stroke:var(--color-orange); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--transition-normal); }
.esa-renewal-page .faq-item.open .faq-chev { background:var(--color-orange); }
.esa-renewal-page .faq-item.open .faq-chev svg { stroke:#fff; transform:rotate(180deg); }
.esa-renewal-page .faq-body { max-height:0; overflow:hidden; transition:max-height .32s cubic-bezier(.4,0,.2,1); }
.esa-renewal-page .faq-item.open .faq-body { max-height:900px; }
.esa-renewal-page .faq-ans { padding:var(--space-4) var(--space-5) var(--space-5); border-top:1px solid var(--color-border); font-family:var(--font-sans); font-size:var(--text-md); line-height:var(--leading-body); color:var(--color-text-body); }
.esa-renewal-page .faq-ans p { margin-bottom:var(--space-3); }
.esa-renewal-page .faq-ans p:last-child { margin-bottom:0; }
.esa-renewal-page .faq-ans a { color:var(--color-orange); border-bottom:1px solid rgba(255,91,46,.25); font-weight:var(--weight-medium); text-decoration:none; }
.esa-renewal-page .faq-ans a:hover { border-bottom-color:var(--color-orange); }

.esa-renewal-page .final-cta { background:var(--color-bg-peach); position:relative; overflow:hidden; padding:104px 0 96px; border-top:4px solid var(--color-orange); }
.esa-renewal-page .final-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, rgba(255,239,217,.85) 0%, rgba(255,250,245,.4) 55%, transparent 80%); pointer-events:none; z-index:0; }
.esa-renewal-page .final-cta-inner { position:relative; z-index:2; text-align:center; }
.esa-renewal-page .fcta-eyebrow { display:inline-block; font-family:var(--font-serif); font-style:italic; font-size:var(--text-md); color:var(--color-orange); letter-spacing:0.01em; margin-bottom:var(--space-4); }
.esa-renewal-page .fcta-h2 { font-family:var(--font-serif); font-size:clamp(30px,4vw,44px); color:var(--color-text-heading); font-weight:var(--weight-regular); letter-spacing:var(--tracking-tight); line-height:var(--leading-tight); margin-bottom:var(--space-5); }
.esa-renewal-page .fcta-desc { font-family:var(--font-sans); font-size:var(--text-lg); color:var(--color-text-body); line-height:var(--leading-body); max-width:500px; margin:0 auto var(--space-10); }
.esa-renewal-page .fcta-btn-row { display:flex; justify-content:center; margin-bottom:var(--space-5); }
.esa-renewal-page .btn-final { display:inline-flex; align-items:center; gap:var(--space-2); padding:18px 48px; background:var(--color-orange); color:#fff; font-family:var(--font-sans); font-size:var(--text-lg); font-weight:var(--weight-bold); border-radius:var(--radius-full); border:none; box-shadow:0 6px 24px rgba(255,91,46,.4); text-decoration:none; transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), background var(--transition-fast); }
.esa-renewal-page .btn-final:hover { background:var(--color-orange-hover); box-shadow:0 10px 32px rgba(255,91,46,.5); transform:translateY(-2px); color:#fff; text-decoration:none; }
.esa-renewal-page .btn-final svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.esa-renewal-page .fcta-note { font-family:var(--font-sans); font-size:var(--text-sm); color:var(--color-text-secondary); }

.esa-renewal-page .byline-sec { background:var(--color-bg-warm); border-top:1px solid var(--color-border); padding:48px 0 56px; }
.esa-renewal-page .byline-inner { max-width:780px; margin:0 auto; padding:0 var(--space-8); }
.esa-renewal-page .byline-row { display:flex; align-items:flex-start; gap:var(--space-8); padding-bottom:var(--space-6); margin-bottom:var(--space-5); border-bottom:1px solid var(--color-border); flex-wrap:wrap; }
.esa-renewal-page .byline-block { display:flex; flex-direction:column; gap:var(--space-3); flex:1; min-width:220px; }
.esa-renewal-page .byline-label { font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-text-secondary); }
.esa-renewal-page .byline-av-row { display:flex; align-items:center; gap:var(--space-3); }
.esa-renewal-page .byline-divider { width:1px; background:var(--color-border-strong); align-self:stretch; flex-shrink:0; }
.esa-renewal-page .byline-av { width:44px; height:44px; border-radius:50%; background:var(--color-orange); color:#fff; font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-bold); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 0 3px rgba(255,91,46,.15); object-fit:cover; }
.esa-renewal-page img.byline-av { display:block; padding:0; }
.esa-renewal-page .byline-av.reviewer { box-shadow:0 0 0 3px rgba(14,20,95,.12); background:var(--color-navy); }
.esa-renewal-page img.byline-av.reviewer { background:transparent; }
.esa-renewal-page .byline-txt { font-family:var(--font-sans); font-size:var(--text-sm); color:var(--color-text-secondary); line-height:var(--leading-snug); display:flex; flex-direction:column; gap:2px; }
.esa-renewal-page .byline-txt strong { font-size:var(--text-md); font-weight:var(--weight-bold); color:var(--color-text-heading); }
.esa-renewal-page .disclaimer { background:var(--color-bg-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); font-family:var(--font-sans); font-size:var(--text-sm); color:var(--color-text-secondary); line-height:var(--leading-body); }
.esa-renewal-page .disclaimer strong { font-weight:var(--weight-bold); color:var(--color-text-heading); }

/* ============================================================
   Pet warmth — mascots, badges, and background paws
   ============================================================ */

/* Paw SVG — local definition (renewal CSS does not load landing-page CSS) */
.esa-renewal-page { --paw-orange: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='%23FF5B2E'%3E%3Cellipse cx='7' cy='9' rx='3.2' ry='2.8'/%3E%3Cellipse cx='3' cy='5' rx='1.3' ry='1.7'/%3E%3Cellipse cx='5.8' cy='3' rx='1.3' ry='1.7'/%3E%3Cellipse cx='8.7' cy='3' rx='1.3' ry='1.7'/%3E%3Cellipse cx='11' cy='5' rx='1.1' ry='1.4'/%3E%3C/svg%3E"); }

/* ── Validity card (hero right) ── */
.esa-renewal-page .validity-card { position:relative; overflow:visible; }
.esa-renewal-page .validity-card-mascot { position:absolute; top:0; right:18px; width:140px; height:42px; object-fit:contain; transform:translateY(-72%); pointer-events:none; filter:drop-shadow(0 4px 12px rgba(14,20,95,.12)); z-index:3; }
.esa-renewal-page .validity-card-hd { position:relative; overflow:hidden; }

/* ── Urgency card (Section 2 sidebar) ── */
.esa-renewal-page .urgency-card-hd { position:relative; }
.esa-renewal-page .urgency-shield-mascot { position:absolute; top:-26px; right:-14px; width:72px; height:72px; object-fit:contain; transform:rotate(-6deg); filter:drop-shadow(0 6px 14px rgba(255,91,46,.18)); pointer-events:none; z-index:2; }

/* ── Benefits card guarantee badge (Section 3 sidebar) ── */
.esa-renewal-page .benefits-card { position:relative; overflow:hidden; }
.esa-renewal-page .benefits-card-ft { display:flex; align-items:center; gap:var(--space-3); }
.esa-renewal-page .benefits-guarantee-badge { width:32px; height:32px; border-radius:50%; background:rgba(34,197,94,.12); color:#15803d; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.esa-renewal-page .benefits-guarantee-badge svg { width:16px; height:16px; }
.esa-renewal-page .benefits-card-ft span:last-child { flex:1; }

/* ── Air-travel upsell mascot ── */
.esa-renewal-page .air-upsell-strip { gap:var(--space-5); }
.esa-renewal-page .air-upsell-mascot { width:84px; height:84px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 4px 12px rgba(255,91,46,.18)); }

/* ── Final CTA: cat illustration behind content ── */
.esa-renewal-page .final-cta::after {
  content:'';
  position:absolute;
  background:url('images/rejection-exhale-hand-cat.svg') no-repeat center / contain;
  width:min(420px, 60%);
  aspect-ratio:200 / 140;
  right: -38px;
    bottom: -32%;
  transform:translate(-50%, -50%);
  opacity:.55;
  pointer-events:none;
  z-index:1;
}

/* ── Section background paws ── */
.esa-renewal-page .hero-section-paws,
.esa-renewal-page .steps-section-paws,
.esa-renewal-page .air-section-paws,
.esa-renewal-page .fcta-section-paws { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }

.esa-renewal-page .renewal-bg-paw { position:absolute; display:block; opacity:0.10; background-image:var(--paw-orange); background-size:contain; background-repeat:no-repeat; background-position:center; }

/* Hero paws — around the edges, avoid the right card */
.esa-renewal-page .hero-paw-a { top:8%;   left:3%;   width:46px; height:46px; transform:rotate(-18deg); opacity:0.10; }
.esa-renewal-page .hero-paw-b { top:62%;  left:1%;   width:38px; height:38px; transform:rotate(14deg);  opacity:0.09; }
.esa-renewal-page .hero-paw-c { bottom:8%; left:32%; width:34px; height:34px; transform:rotate(-8deg);  opacity:0.08; }
.esa-renewal-page .hero-paw-d { top:14%;  right:2%;  width:30px; height:30px; transform:rotate(22deg);  opacity:0.08; }

/* Steps section paws */
.esa-renewal-page .steps-section { position:relative; overflow:hidden; }
.esa-renewal-page .steps-paw-a { top:6%;    left:2%;  width:50px; height:50px; transform:rotate(-22deg); opacity:0.10; }
.esa-renewal-page .steps-paw-b { top:18%;   right:3%; width:38px; height:38px; transform:rotate(16deg);  opacity:0.09; }
.esa-renewal-page .steps-paw-c { bottom:18%; left:3%; width:44px; height:44px; transform:rotate(8deg);   opacity:0.08; }
.esa-renewal-page .steps-paw-d { bottom:6%; right:4%; width:34px; height:34px; transform:rotate(-12deg); opacity:0.10; }
.esa-renewal-page .steps-paw-e { top:48%;   left:1%;  width:30px; height:30px; transform:rotate(20deg);  opacity:0.08; }

/* Air-travel section paws */
.esa-renewal-page .air-travel-section { position:relative; overflow:hidden; }
.esa-renewal-page .air-paw-a { top:8%;    left:4%;  width:42px; height:42px; transform:rotate(-16deg); opacity:0.09; }
.esa-renewal-page .air-paw-b { top:22%;   right:5%; width:34px; height:34px; transform:rotate(20deg);  opacity:0.08; }
.esa-renewal-page .air-paw-c { bottom:14%; left:6%; width:38px; height:38px; transform:rotate(10deg);  opacity:0.09; }
.esa-renewal-page .air-paw-d { bottom:8%;  right:8%; width:30px; height:30px; transform:rotate(-14deg); opacity:0.10; }

/* Final CTA paws — scattered around the section */
.esa-renewal-page .fcta-paw-a { top:10%;    left:6%;   width:46px; height:46px; transform:rotate(-20deg); opacity:0.12; }
.esa-renewal-page .fcta-paw-b { top:18%;    right:8%;  width:38px; height:38px; transform:rotate(16deg);  opacity:0.11; }
.esa-renewal-page .fcta-paw-c { top:55%;    left:3%;   width:42px; height:42px; transform:rotate(8deg);   opacity:0.10; }
.esa-renewal-page .fcta-paw-d { bottom:14%; right:4%;  width:48px; height:48px; transform:rotate(-12deg); opacity:0.12; }
.esa-renewal-page .fcta-paw-e { bottom:8%;  left:18%;  width:34px; height:34px; transform:rotate(22deg);  opacity:0.10; }
.esa-renewal-page .fcta-paw-f { top:40%;    right:14%; width:30px; height:30px; transform:rotate(-6deg);  opacity:0.09; }

/* Keep section content above the paws */
.esa-renewal-page .hero-grid,
.esa-renewal-page .steps-section .container,
.esa-renewal-page .air-travel-section .container,
.esa-renewal-page .final-cta .container { position:relative; z-index:2; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px) {
  .esa-renewal-page .hero-grid { grid-template-columns:1fr 380px; }
  .esa-renewal-page .why-grid, .esa-renewal-page .expiry-grid { grid-template-columns:1fr; }
  .esa-renewal-page .urgency-card, .esa-renewal-page .benefits-card { position:static; max-width:560px; }
}
@media (max-width:900px) {
  .esa-renewal-page .hero-grid { grid-template-columns:1fr; padding-right:var(--space-8); }
  .esa-renewal-page .hero-right { display:flex; padding:0 var(--space-5) var(--space-8); justify-content:center; }
  .esa-renewal-page .hero-left { padding:56px 0 48px; }
  .esa-renewal-page .steps-track { grid-template-columns:repeat(2,1fr); }
  .esa-renewal-page .steps-track::before { display:none; }
}
@media (max-width:768px) {
  .esa-renewal-page .sec { padding:64px 0; }
  .esa-renewal-page .container { padding:0 var(--space-5); }
  .esa-renewal-page .hero-h1 { font-size:30px; }
  .esa-renewal-page .final-cta { padding:72px 0; }
  .esa-renewal-page .validity-card-mascot { width:104px; height:31px; right:12px; transform:translateY(-65%); }
  .esa-renewal-page .hero-paw-a,
  .esa-renewal-page .steps-paw-a,
  .esa-renewal-page .steps-paw-c,
  .esa-renewal-page .air-paw-a,
  .esa-renewal-page .air-paw-c,
  .esa-renewal-page .fcta-paw-a,
  .esa-renewal-page .fcta-paw-c,
  .esa-renewal-page .fcta-paw-d { width:30px; height:30px; }
  .esa-renewal-page .hero-paw-b,
  .esa-renewal-page .hero-paw-c,
  .esa-renewal-page .hero-paw-d,
  .esa-renewal-page .steps-paw-b,
  .esa-renewal-page .steps-paw-d,
  .esa-renewal-page .steps-paw-e,
  .esa-renewal-page .air-paw-b,
  .esa-renewal-page .air-paw-d,
  .esa-renewal-page .fcta-paw-b,
  .esa-renewal-page .fcta-paw-e,
  .esa-renewal-page .fcta-paw-f { width:24px; height:24px; }
}
@media (max-width:600px) {
  .esa-renewal-page .air-upsell-mascot { width:64px; height:64px; align-self:flex-start; }
}
@media (max-width:575px) {
  .esa-renewal-page .hero-h1 { font-size:26px; }
  .esa-renewal-page .steps-track { grid-template-columns:1fr; }
  .esa-renewal-page .byline-inner { padding:0 var(--space-5); }
  .esa-renewal-page .byline-divider { display:none; }
  .esa-renewal-page .steps-refund svg { display:none; }
}