/* Hero only. The supplied reference is reused without altering its pixels. */
.hero.hero-reference {
  position:relative; isolation:isolate; overflow:hidden; padding:0;
  min-height:0; height:clamp(650px,50vw,835px);
  background:radial-gradient(ellipse at 15% 110%,#e4f4ff 0,transparent 46%),linear-gradient(110deg,#fff 45%,#fff8ed);
}
.hero.hero-reference::before { content:none; }
.hero.hero-reference::after {
  content:""; position:absolute; width:180px; height:180px; top:-110px; left:-90px;
  border-radius:50%; background:#fff3d9; z-index:-1;
}
.hero-reference-copy { position:relative; z-index:2; width:46%; padding:clamp(40px,4.2vw,70px) 0 40px 4.5%; }
.hero-reference .eyebrow { margin:0 0 25px; font-size:clamp(14px,1.2vw,20px); letter-spacing:.14em; }
.hero-reference .eyebrow span { color:#ff8611; }
.hero-reference h1 { margin:0; font-size:clamp(42px,4.35vw,73px); font-weight:900; line-height:1.35; letter-spacing:-.055em; color:#051f49; }
.hero-reference h1>span { display:block; white-space:nowrap; }
.hero-reference h1 strong { position:relative; display:inline-block; color:#fa7900; font-size:1.18em; font-weight:900; line-height:1.2; margin-right:.05em; }
.hero-reference h1 strong::after { content:""; position:absolute; z-index:-1; height:.12em; border-radius:50%; background:#ffdf68; left:-.03em; right:-.04em; bottom:-.03em; transform:rotate(-3deg); }
.hero-reference-description { margin:28px 0 25px; color:#082b63; font-size:clamp(15px,1.38vw,23px); font-weight:500; line-height:1.8; letter-spacing:-.025em; }
.hero-reference-description>.hero-reference-note { display:block; margin-top:2px; }
.hero-reference-description .hero-tool-name { white-space:nowrap; }
.hero-reference .benefit-pills { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px; padding:0; margin:0 0 24px; }
.hero-reference .benefit-pills li { min-height:46px; padding:8px 18px; font-size:clamp(14px,1.2vw,20px); border:1px solid #cce0f4; background:#fff; box-shadow:0 3px 7px #082b6308; color:#051f49; }
.hero-reference .benefit-pills li span { color:#ff8000; background:transparent; font-size:1.4em; }
.hero-reference-actions { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.hero-reference .hero-reference-button { display:flex; justify-content:center; gap:28px; width:min(100%,445px); min-height:76px; padding:18px 24px; border-radius:14px; background:linear-gradient(110deg,#ff8800,#ff7900); font-size:clamp(22px,1.8vw,30px); font-weight:900; box-shadow:0 10px 24px #ef8a182b; }
.hero-reference .hero-reference-button:hover { background:#e96818; }
.hero-reference-compare { color:#082b63; font-size:clamp(16px,1.3vw,22px); font-weight:800; text-decoration:none; border-bottom:1px solid #6b86ae; padding-bottom:5px; }
.hero-reference-compare:hover { color:#dd7303; }
.hero-reference-art { position:absolute; z-index:1; right:0; bottom:0; width:60%; aspect-ratio:1000 / 834; overflow:hidden; clip-path:polygon(3.2% 0,100% 0,100% 100%,0 100%,0 64%,3.2% 58%); mask-image:linear-gradient(to right,transparent,#000 3.2%); }
.hero-reference-art img { position:absolute; max-width:none; width:167.2%; height:112.94964%; left:-67.2%; top:-12.94964%; object-fit:fill; }
.hero-reference-art::after { content:""; position:absolute; inset:0 auto auto 3.2%; width:3%; height:61%; background:linear-gradient(to right,#fff,transparent); pointer-events:none; }
@media (max-width:1100px) and (min-width:901px) {
  .hero-reference-copy { width:49%; padding-left:3%; }
  .hero-reference h1 { font-size:4.3vw; }
  .hero-reference .benefit-pills { gap:7px; }
  .hero-reference .benefit-pills li { padding:7px 10px; }
  .hero-reference-art { width:55%; }
}
@media (max-width:900px) {
  .hero.hero-reference { height:auto; display:flex; flex-direction:column; }
  .hero-reference-copy { width:100%; padding:36px 24px 24px; max-width:650px; margin:0 auto; }
  .hero-reference .eyebrow { margin-bottom:20px; font-size:14px; }
  .hero-reference h1 { font-size:clamp(32px,6.8vw,52px); line-height:1.4; }
  .hero-reference-description { margin:24px 0 20px; font-size:16px; }
  .hero-reference .benefit-pills { gap:8px; margin-bottom:20px; }
  .hero-reference .benefit-pills li { padding:7px 13px; min-height:42px; font-size:14px; }
  .hero-reference-actions { gap:18px; }
  .hero-reference .hero-reference-button { min-height:62px; font-size:23px; width:100%; max-width:445px; }
  .hero-reference-compare { font-size:17px; }
  .hero-reference-art { position:relative; width:100%; max-width:650px; margin:0 auto; mask-image:none; }
  .hero-reference-art::after { content:none; }
}
@media (max-width:430px) {
  .hero-reference-copy { padding:30px 20px 22px; }
  .hero-reference h1 { font-size:33px; letter-spacing:-.06em; }
  .hero-reference-description { font-size:14px; line-height:1.9; }
  .hero-reference-description br:first-of-type { display:none; }
  .hero-reference .benefit-pills { gap:6px; }
  .hero-reference .benefit-pills li { padding:6px 10px; font-size:13px; }
}