/* Homepage option A: info-product trust hub. Classes prefixed ha-. */
.ha-hero{background:radial-gradient(1200px 500px at 85% 20%,#d6ecfb 0,rgba(214,236,251,0) 70%),linear-gradient(180deg,var(--sky),#fff);padding:64px 0 0;overflow:hidden}
.ha-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:end}
.ha-hero-copy{padding-bottom:72px}
.ha-hero h1{font-size:clamp(36px,4.6vw,60px);margin-bottom:.3em}
.ha-hero .lead{font-size:clamp(21px,2vw,26px);color:var(--navy);margin-bottom:28px}
.ha-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px 28px;box-shadow:var(--shadow);max-width:520px}
.ha-box p:first-child{font:600 19px/1.4 var(--hf);color:var(--navy);margin:0 0 16px}
.ha-box .btn{width:100%}
.ha-box-sub{font-size:16px;color:var(--muted);margin:14px 0 0}
.ha-hero-art{position:relative;min-height:540px;display:flex;justify-content:center;align-items:flex-end}
.ha-disc{position:absolute;left:50%;bottom:-120px;width:520px;height:520px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(160deg,var(--blue),var(--teal));opacity:.9}
.ha-mark{position:relative;width:360px;max-width:80%;z-index:1}
.ha-pack{position:absolute;right:-10px;bottom:24px;width:300px;max-width:58%;z-index:2;filter:drop-shadow(0 18px 24px rgba(15,42,68,.3))}

.ha-strip{background:var(--navy);color:#e7eef5}
.ha-strip ul{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:22px;padding-bottom:22px}
.ha-strip li{display:flex;align-items:center;gap:10px;font-size:17px;justify-content:center;text-align:center}
.ha-strip b{font:700 19px/1 var(--hf);color:#7fd6d6}

.ha-intro-grid{display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:start}
.ha-photo{margin:0;position:sticky;top:110px}
.ha-photo img{border-radius:var(--r-l);box-shadow:var(--shadow);transform:rotate(-1.5deg)}
.ha-photo figcaption{font-size:16px;color:var(--muted);margin-top:16px;text-align:center}
.ha-letter h2{margin-bottom:.7em}
.ha-big{font:600 clamp(21px,2vw,25px)/1.4 var(--hf);color:var(--navy);border-left:5px solid var(--teal);padding:4px 0 4px 20px;margin:1.2em 0}

.ha-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:56px;padding:26px 32px;border-radius:var(--r-l);background:linear-gradient(90deg,var(--teal-l),var(--sky));border:1px solid var(--line)}
.ha-bar p{margin:0;font:600 clamp(19px,1.8vw,22px)/1.35 var(--hf);color:var(--navy)}
.ha-bar .btn{flex:none}

.ha-ways-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.ha-way{background:#fff;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-s);border:1px solid var(--line);display:flex;flex-direction:column}
.ha-way img{aspect-ratio:3/2;object-fit:cover;width:100%}
.ha-way-body{padding:26px 28px 28px;position:relative}
.ha-num{position:absolute;top:-28px;right:24px;width:56px;height:56px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font:700 24px/1 var(--hf);box-shadow:0 8px 18px -6px rgba(232,71,59,.6)}
.ha-way h3{text-transform:uppercase;letter-spacing:.04em;font-size:19px;color:var(--blue-d)}
.ha-more{font:600 17px/1.2 var(--hf);text-decoration:none;color:var(--coral-d)}
.ha-more::after{content:" \2192"}
.ha-more:hover{color:var(--coral)}

.ha-steps{width:100%;border-radius:var(--r-l);box-shadow:var(--shadow);margin:0 0 36px;aspect-ratio:1360/520;object-fit:cover}
.ha-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ha-grid li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 22px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:6px;transition:transform .15s,border-color .15s}
.ha-grid li:hover{transform:translateY(-3px);border-color:var(--teal)}
.ha-n{width:44px;height:44px;border-radius:12px;background:var(--sky);color:var(--blue-d);display:grid;place-items:center;font:700 20px/1 var(--hf)}
.ha-day{font:600 16px/1.2 var(--hf);color:var(--teal-d);margin-top:6px}
.ha-t{font:600 18px/1.35 var(--hf);color:var(--navy)}
.ha-grid .ha-bonus{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;background:linear-gradient(90deg,#fff6df,#fff);border-color:#f3dc9c}
.ha-bonus .ha-n{background:var(--sun);color:var(--navy)}
.ha-bonus .ha-day{margin:0}
.ha-day1{text-align:center;color:var(--muted);margin:28px auto 0;max-width:820px}
.ha-day1 b{color:var(--navy);font-weight:600}

.ha-gift-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ha-gift{text-align:center;display:flex;flex-direction:column;align-items:center}
.ha-gift img{height:190px;width:auto;object-fit:contain;margin:0 auto 18px;filter:drop-shadow(0 12px 16px rgba(15,42,68,.2))}
.ha-gift img.ha-gift-photo{width:100%;height:190px;object-fit:cover;border-radius:12px;filter:none}
.ha-gift h3{font-size:20px}
.ha-gift p{font-size:17px;color:var(--muted)}

.ha-close-grid{display:grid;grid-template-columns:1fr 480px;gap:56px;align-items:center}
.ha-close h2{font-size:clamp(30px,3.6vw,46px)}
.ha-close-art{width:340px;max-width:100%;margin-top:12px;filter:drop-shadow(0 18px 26px rgba(0,0,0,.35))}
.ha-form{background:#fff;color:var(--ink);border-radius:var(--r-l);padding:32px;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.section.dark .ha-form h3{color:var(--navy);margin-bottom:18px}
.section.dark .ha-form .ck-fine{color:var(--muted)}
.section.dark .ha-form a:not(.btn){color:var(--blue-d)}

@media (max-width:1000px){
  .ha-hero-grid{grid-template-columns:1fr;gap:0}
  .ha-hero-copy{padding-bottom:24px}
  .ha-hero-art{min-height:420px}
  .ha-mark{width:290px}
  .ha-pack{right:0;width:250px}
  .ha-intro-grid{grid-template-columns:1fr;gap:32px}
  .ha-photo{position:static;max-width:520px;margin:0 auto}
  .ha-grid{grid-template-columns:repeat(2,1fr)}
  .ha-gift-grid{grid-template-columns:repeat(2,1fr)}
  .ha-close-grid{grid-template-columns:1fr;gap:32px}
  .ha-strip ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .ha-hero{padding-top:36px}
  .ha-box{padding:20px}
  .ha-hero-art{min-height:340px}
  .ha-disc{width:340px;height:340px;bottom:-80px}
  .ha-mark{width:220px}
  .ha-pack{width:190px;bottom:12px}
  .ha-strip li{flex-direction:column;gap:4px;font-size:16px}
  .ha-bar{flex-direction:column;align-items:stretch;text-align:center;padding:22px 20px;margin-top:40px}
  .ha-ways-grid,.ha-grid,.ha-gift-grid{grid-template-columns:1fr}
  .ha-grid li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;padding:16px}
  .ha-grid li .ha-n{grid-row:span 2}
  .ha-grid li .ha-day{margin:0}
  .ha-grid .ha-bonus{display:grid;align-items:start}
  .ha-way-body{padding:22px}
  .ha-steps{aspect-ratio:16/9}
  .ha-gift img{height:160px}
  .ha-form{padding:22px}
}

/* design-check fixes 11 Nov */
.ha-steps{width:100%;max-height:240px;object-fit:cover;border-radius:var(--r-l);margin-bottom:28px}
@media (max-width:640px){.ha-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}.ha-grid li{display:flex!important;flex-direction:column;padding:14px 12px!important}.ha-grid .ha-bonus{grid-column:1/-1}.ha-steps{max-height:150px}}

/* hero balance (Edsun 11 Nov): art fills the right column, products bridge the two columns, chips fill the top-right */
.ha-chip{display:none}
@media (min-width:1001px){
  .ha-hero{padding-top:48px}
  .ha-hero-grid{grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
  .ha-hero-copy{align-self:center;padding:8px 0 56px}
  .ha-hero-art{min-height:600px}
  .ha-disc{width:540px;height:540px;bottom:30px;opacity:1;box-shadow:0 0 0 22px rgba(0,149,232,.10),0 0 0 46px rgba(0,149,232,.05)}
  .ha-mark{width:420px;max-width:86%}
  .ha-pack{left:-36px;right:auto;bottom:22px;width:300px;max-width:52%}
  .ha-chip{display:flex;align-items:center;gap:10px;position:absolute;z-index:3;margin:0;background:#fff;border-radius:999px;padding:10px 18px 10px 10px;box-shadow:0 14px 30px rgba(15,42,68,.16);font:600 16px/1.25 var(--hf);color:var(--navy);max-width:230px}
  .ha-chip b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--coral);color:#fff;font-size:18px;flex:none}
  .ha-chip-1{top:84px;right:-6px}
  .ha-chip-2{top:auto;bottom:210px;right:-26px}
  .ha-chip-2 b{background:var(--teal)}
}
@media (min-width:1001px) and (max-width:1200px){.ha-chip-1,.ha-chip-2{right:6px}}
@media (min-width:601px) and (max-width:1000px){.ha-hero-copy{text-align:center}.ha-hero-copy .eyebrow{justify-content:center}.ha-box{margin:0 auto;text-align:left}}
@media (min-width:1001px) and (max-height:800px){.ha-hero{padding-top:28px}.ha-hero h1{font-size:clamp(36px,4vw,52px)}.ha-hero .lead{margin-bottom:18px}.ha-box{padding:20px 26px}.ha-box p:first-child{margin-bottom:12px}.ha-hero-copy{padding-bottom:40px}}
@media (max-width:600px){.ha-hero{padding-top:22px}.ha-hero .lead{margin-bottom:18px}.ha-box p:first-child{margin-bottom:12px}}
@media (max-width:380px){.ha-hero h1{font-size:32px}.ha-hero .lead{font-size:19px}}
