/* problem.html — visual layer only (no markup/content changes). Load LAST. */
.problem-page{--pd-cu:#b4561f;--pd-cu2:#f0a35e;--pd-navy:#0b1530;--pd-ease:cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;padding:44px 0 72px;background:radial-gradient(620px 320px at 88% 0,rgba(240,163,94,.28),transparent 62%),radial-gradient(520px 300px at 8% 18%,rgba(75,123,255,.12),transparent 62%),linear-gradient(180deg,#fff8f1,#f6f8fc 55%)}
.problem-page::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;inset-inline-start:-90px;top:-110px;background:radial-gradient(circle,rgba(255,184,107,.55),transparent 66%);animation:pdFloat 8s ease-in-out infinite;pointer-events:none}
@keyframes pdFloat{50%{transform:translateY(18px) scale(1.07)}}
.problem-page [data-reveal]{opacity:1!important;transform:none!important}
.problem-page__inner{position:relative;max-width:980px!important}

/* stepper (injected by path-status.js) */
.hamtab-path-status.hamtab-path-status{border-radius:22px;padding:16px 20px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(11,21,48,.08);border:1px solid rgba(255,255,255,.9)}
.hamtab-path-status__track::before{content:"";position:absolute;inset-inline:10%;top:15px;height:4px;border-radius:4px;background:#e6ebf4;z-index:0}
.hamtab-path-status .hamtab-path-status__dot{width:30px;height:30px;font-size:13px;transition:transform .4s var(--pd-ease)}
.hamtab-path-status .hamtab-path-status__step.is-current .hamtab-path-status__dot{background:linear-gradient(135deg,var(--pd-cu),var(--pd-cu2));transform:scale(1.18);animation:pdPulse 2.4s infinite}
.hamtab-path-status .hamtab-path-status__step.is-done .hamtab-path-status__dot{background:linear-gradient(135deg,#0f766e,#27d17f)}
@keyframes pdPulse{50%{box-shadow:0 0 0 9px rgba(240,163,94,.2),0 0 22px rgba(255,184,107,.6)}}
.hamtab-path-status .hamtab-path-status__label{font-size:12px}

/* intro */
.problem-page .problem-intro{margin:34px 0 30px}
.problem-page .problem-intro__kicker{display:inline-block;padding:7px 16px;border-radius:99px;background:#fff;color:var(--pd-cu);font-weight:800;font-size:13px;box-shadow:0 8px 22px rgba(180,86,31,.14);animation:pdIn .6s both}
.problem-page .problem-intro__title{font-size:clamp(1.9rem,5vw,3rem);line-height:1.35;font-weight:800;margin:16px 0 10px;background:linear-gradient(120deg,#0b1530 30%,#b4561f);-webkit-background-clip:text;background-clip:text;color:transparent;animation:pdIn .7s .08s both}
.problem-page .problem-intro__desc{font-size:1.05rem;color:#53607d;animation:pdIn .7s .16s both}
@keyframes pdIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* grid: two big cards on top, three smaller below */
.problem-page .problem-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin:0}
.problem-page .problem-card{position:relative;overflow:hidden;min-height:150px;padding:22px;border-radius:26px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.92);box-shadow:0 14px 40px rgba(11,21,48,.08);gap:16px;animation:pdIn .7s var(--pd-ease) both;transition:transform .35s var(--pd-ease),box-shadow .35s,border-color .35s}
.problem-page .problem-card:nth-child(1){grid-column:span 3;animation-delay:.2s}
.problem-page .problem-card:nth-child(2){grid-column:span 3;animation-delay:.3s}
.problem-page .problem-card:nth-child(n+3){grid-column:span 2;min-height:120px}
.problem-page .problem-card:nth-child(3){animation-delay:.4s}.problem-page .problem-card:nth-child(4){animation-delay:.5s}.problem-page .problem-card:nth-child(5){animation-delay:.6s}
.problem-page .problem-card::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,var(--pd-cu),var(--pd-cu2))}
.problem-page .problem-card[data-problem-type="high_bill"]::before{background:linear-gradient(90deg,#0f766e,#27d17f)}
.problem-page .problem-card::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;inset-inline-end:-60px;bottom:-70px;background:radial-gradient(circle,rgba(240,163,94,.3),transparent 68%);opacity:0;transition:opacity .4s}
.problem-page .problem-card:hover:not(:disabled)::after{opacity:1}
.problem-page .problem-card:hover:not(:disabled){transform:translateY(-8px);border-color:#fdba74;box-shadow:0 26px 56px rgba(180,86,31,.2)}
.problem-page .problem-card:active:not(:disabled){transform:scale(.98)}
.problem-page .problem-card:focus-visible{outline:3px solid var(--pd-cu2);outline-offset:3px}
.problem-page .problem-card__icon{flex:0 0 64px;height:64px;border-radius:20px;background:linear-gradient(135deg,var(--pd-cu),var(--pd-cu2));color:#fff;box-shadow:0 12px 26px rgba(180,86,31,.38);transition:transform .4s var(--pd-ease)}
.problem-page .problem-card[data-problem-type="high_bill"] .problem-card__icon{background:linear-gradient(135deg,#0f766e,#27d17f);box-shadow:0 12px 26px rgba(15,118,110,.35)}
.problem-page .problem-card:hover:not(:disabled) .problem-card__icon{transform:scale(1.12) rotate(-7deg)}
.problem-page .problem-card__icon svg{width:30px;height:30px}
.problem-page .problem-card__title{font-size:1.2rem;font-weight:800;color:var(--pd-navy)}
.problem-page .problem-card:nth-child(n+3) .problem-card__title{font-size:1.05rem}
.problem-page .problem-card__hint{font-size:.9rem;line-height:1.8}
.problem-page .problem-card__badge{position:absolute;inset-block-start:16px;inset-inline-start:16px;display:inline-flex;align-items:center;gap:6px;font-weight:700}
.problem-page .problem-card__badge:not(.problem-card__badge--soon)::before{content:"";width:7px;height:7px;border-radius:50%;background:#10b981;animation:pdPulse2 2s infinite}
@keyframes pdPulse2{70%{box-shadow:0 0 0 7px transparent}0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}}
.problem-page .problem-card__arrow{font-size:1.4rem;color:var(--pd-cu);transition:transform .35s var(--pd-ease)}
.problem-page .problem-card:hover:not(:disabled) .problem-card__arrow{transform:translateX(-8px)}
.problem-page .problem-card--soon,.problem-page .problem-card:disabled{opacity:.7;filter:saturate(.35);background:repeating-linear-gradient(135deg,#f8fafc 0 12px,#f1f5f9 12px 24px)}
.problem-page .problem-card--soon .problem-card__icon{background:#cbd5e1;box-shadow:none}
.problem-page .problem-card--soon::before{background:#cbd5e1}
.problem-page .problem-card--soft::before{background:linear-gradient(90deg,#4b7bff,#9bb6ff)}
.problem-page .problem-card--soft .problem-card__icon{background:linear-gradient(135deg,#4b7bff,#8fb0ff);box-shadow:0 12px 26px rgba(75,123,255,.3)}
.problem-page .problem-card--link::before{background:linear-gradient(90deg,#f59e0b,#fde68a)}
.problem-page .problem-note{display:table;margin:26px auto 0;padding:9px 18px;border-radius:99px;background:rgba(255,255,255,.8);color:#53607d}

/* confirm step */
.problem-page .problem-confirm:not([hidden]){animation:pdIn .5s var(--pd-ease) both}
.problem-page .problem-confirm__card{border-radius:28px;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--pd-cu),var(--pd-cu2)) border-box;box-shadow:0 30px 70px rgba(180,86,31,.22)}
.problem-page .problem-confirm__choice{font-size:1.5rem}
.problem-page .problem-confirm__actions .btn-cta{box-shadow:0 14px 30px rgba(180,86,31,.4);animation:pdBtn 2.6s ease-in-out infinite}
@keyframes pdBtn{50%{transform:translateY(-2px) scale(1.02)}}
.problem-page .problem-resume{border-radius:20px;background:#fff7ed;border:1px solid #fed7aa}

@media(max-width:820px){.problem-page .problem-grid{grid-template-columns:1fr 1fr}.problem-page .problem-card:nth-child(1),.problem-page .problem-card:nth-child(2){grid-column:span 2}.problem-page .problem-card:nth-child(n+3){grid-column:span 1}}
@media(max-width:560px){.problem-page{padding-top:24px}.problem-page .problem-grid{grid-template-columns:1fr}.problem-page .problem-card:nth-child(n){grid-column:span 1}.problem-page .problem-card{min-height:104px}}
@media(prefers-reduced-motion:reduce){.problem-page *,.problem-page::before{animation:none!important;transition:none!important}}