/* Reference-led hero: live text at left, uninterrupted artwork at right. */
.home-page .header{position:sticky;top:0;height:76px;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:0;padding-left:max(40px,calc((100vw - 1320px)/2));padding-right:max(40px,calc((100vw - 1320px)/2));gap:36px}
.home-page .desktop-nav{gap:30px}.home-page .brand>span{font-size:19px}
.reference-hero{position:relative;isolation:isolate;background:#fff;min-height:570px;overflow:clip}
.reference-art{position:absolute;inset:-76px 0 0;z-index:-1;transform-origin:70% 60%}
.reference-art img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;max-width:none}
.reference-inner{position:relative;max-width:1440px;min-height:clamp(570px,43vw,650px);margin:auto;padding:54px 64px 68px;display:flex;align-items:flex-start}
.reference-copy{position:relative;width:52%;z-index:2;transform-origin:left center}
.reference-eyebrow{font-size:14px;line-height:1.7;letter-spacing:.075em;color:#4896bf;font-weight:500;margin-bottom:14px}
.reference-copy h1{font-family:var(--serif);font-weight:700;line-height:1.32;letter-spacing:-.04em;color:#081c3b}
.reference-title-first{display:block;font-size:clamp(48px,5vw,72px)}
.reference-cross{padding:0 4px;font-weight:500}
.reference-title-second{display:block;font-size:clamp(32px,3.65vw,53px);white-space:nowrap;margin-top:4px;letter-spacing:-.055em}
.reference-lead{font-size:21px;line-height:1.6;letter-spacing:.045em;margin-top:22px;color:#334f7a}
.reference-lead>span{font-size:22px;letter-spacing:.03em}
.reference-description{font-size:14px;line-height:2;letter-spacing:.035em;color:#60718c;margin-top:15px;max-width:560px}
.reference-actions{display:flex;gap:20px;margin-top:25px}
.reference-actions .button{min-width:235px;min-height:56px;justify-content:center;gap:24px;font-size:16px;padding:15px 27px;box-shadow:0 6px 18px #197bab22}
.reference-actions .secondary{background:#ffffffdc;border-color:#aed6f2}
.reference-availability{display:flex;gap:25px;align-items:center;font-size:12px;color:#47668b;margin-top:26px}
.reference-availability>span{display:flex;align-items:center;gap:9px}
.reference-availability img{width:20px;height:20px}
.reference-handwriting{position:absolute;top:18px;right:105px;transform:rotate(-13deg);color:#4988b7;font:italic 23px/1.05 'Segoe Print','Bradley Hand',cursive}
.reference-handwriting span{padding-left:22px}
.reference-caption{position:absolute;right:15.5%;bottom:32px;border:1px solid #ffffffb8;border-radius:8px;padding:13px 19px;background:#fffffff0;box-shadow:0 4px 18px #126b9020;color:#3c6a95;font-size:14px;line-height:1.8;letter-spacing:.07em}
.home-page .challenges{margin-top:-1px;border-radius:32px 32px 0 0;padding-top:25px;padding-bottom:28px;background:linear-gradient(#f1f7fb,#fff)}
.home-page .challenge-grid{gap:12px}.home-page .challenge{padding:24px 22px}.home-page .challenge-answer{padding-top:17px}.home-page .challenge-answer>span{margin-bottom:10px}.home-page .challenge-answer p{margin-top:7px}
.motion-reveal{opacity:1;transform:none}
.motion-reveal.is-waiting{opacity:0;transform:translate3d(0,30px,0)}
.motion-reveal.is-visible{animation:section-arrive .8s cubic-bezier(.2,.65,.25,1) both}
.motion-reveal:focus-within{opacity:1!important;transform:none!important;animation:none!important}
@keyframes section-arrive{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(min-width:1700px){.reference-art img{object-fit:cover}.reference-inner{min-height:680px}}
@media(max-width:1200px){.home-page .header{padding-left:36px;padding-right:36px;gap:24px}.home-page .desktop-nav{gap:20px}.home-page .brand>span{font-size:17px}.reference-inner{padding:40px 44px 58px;min-height:550px}.reference-hero{min-height:550px}.reference-eyebrow{font-size:12px}.reference-title-first{font-size:58px}.reference-title-second{font-size:40px}.reference-lead{font-size:18px;margin-top:20px}.reference-lead>span{font-size:19px}.reference-description{font-size:13px;max-width:440px}.reference-actions{gap:16px;margin-top:24px}.reference-actions .button{min-width:190px;min-height:50px;font-size:14px;padding:13px 23px}.reference-availability{font-size:11px;gap:22px;margin-top:22px}.reference-handwriting{right:70px;top:24px;font-size:20px}.reference-caption{font-size:12px;right:13%;bottom:28px}.reference-desktop-break{display:none}}
@media(min-width:801px) and (max-width:1000px){.home-page .header{height:66px;padding:0 30px;gap:20px}.home-page .desktop-nav{gap:17px}.home-page .desktop-nav a{font-size:10px}.home-page .desktop-nav small{font-size:8px}.home-page .brand>span{font-size:15px}.home-page .brand small{font-size:8px}.home-page .brand img{width:34px;height:34px}.home-page .header-cta{font-size:10px;padding:11px 19px;gap:18px}.reference-art{top:-66px}.reference-inner{min-height:450px;padding:34px 36px 45px}.reference-hero{min-height:450px}.reference-title-first{font-size:48px}.reference-title-second{font-size:33px}.reference-eyebrow{font-size:10px;margin-bottom:12px}.reference-lead{font-size:15px;margin-top:15px}.reference-lead>span{font-size:16px}.reference-description{font-size:11px;margin-top:12px;max-width:360px}.reference-actions{gap:12px;margin-top:18px}.reference-actions .button{min-width:156px;min-height:43px;font-size:12px;padding:11px 20px;gap:18px}.reference-availability{font-size:9px;gap:18px;margin-top:20px}.reference-availability img{width:17px;height:17px}.reference-handwriting{font-size:17px;right:45px;top:12px}.reference-caption{font-size:11px;padding:10px 15px;right:14%;bottom:24px}}
@media(max-width:800px){.home-page .header{height:72px;padding:0 22px;gap:16px}.home-page .brand>span{font-size:16px}.reference-hero{min-height:0;background:#fff}.reference-inner{min-height:0;display:block;padding:38px 32px 350px}.reference-copy{width:100%;max-width:600px}.reference-eyebrow{font-size:12px}.reference-title-first{font-size:54px}.reference-title-second{font-size:39px}.reference-lead{font-size:17px}.reference-lead>span{font-size:18px}.reference-description{font-size:14px;max-width:500px}.reference-actions .button{min-width:190px}.reference-availability{font-size:11px}.reference-art{top:auto;bottom:0;height:360px;width:100%;overflow:hidden}.reference-art img{width:185%;max-width:none;height:100%;object-fit:cover;object-position:center;position:relative;left:-85%}.reference-handwriting{top:auto;bottom:275px;right:38px;font-size:19px}.reference-caption{bottom:20px;right:25%;font-size:12px}.home-page .challenges{padding-top:28px;padding-bottom:36px}.home-page .challenge{padding:22px 18px}}
@media(max-width:520px){.home-page .header{padding:0 16px;gap:7px}.home-page .brand>span{font-size:14px}.home-page .brand small{font-size:7px}.home-page .brand img{width:32px;height:32px}.reference-inner{padding:30px 22px 290px}.reference-eyebrow{font-size:10px;letter-spacing:.015em;margin-bottom:13px}.reference-title-first{font-size:44px}.reference-title-second{font-size:clamp(23px,6.7vw,34px);letter-spacing:-.05em;margin-top:7px}.reference-lead{font-size:15px;line-height:1.7;margin-top:20px}.reference-lead>span{font-size:16px}.reference-description{font-size:12px;line-height:1.9;margin-top:14px;max-width:360px}.reference-actions{gap:12px;margin-top:23px}.reference-actions .button{min-width:0;flex:1;min-height:47px;padding:12px 14px;font-size:12px;gap:14px;white-space:nowrap}.reference-availability{font-size:9px;gap:18px;margin-top:21px}.reference-availability img{width:16px;height:16px}.reference-art{height:290px}.reference-art img{width:190%;left:-90%;object-fit:cover}.reference-handwriting{right:23px;bottom:236px;font-size:16px}.reference-caption{font-size:10px;bottom:19px;right:24%;padding:9px 13px}.home-page .challenges{border-radius:24px 24px 0 0}.home-page .challenge-answer h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){.reference-art,.reference-copy,.reference-caption{transform:none!important;opacity:1!important}.motion-reveal,.motion-reveal.is-waiting,.motion-reveal.is-visible{opacity:1;transform:none;animation:none}}

/* Keep the complete device silhouettes visible when the artwork moves below the text. */
@media(max-width:800px){.reference-inner{padding-bottom:calc(82.5vw + 16px)}.reference-art{height:82.5vw}.reference-art img{width:165%;left:-65%;height:auto;object-fit:initial}.reference-handwriting{bottom:calc(82.5vw - 72px)}.reference-caption{right:26%;bottom:16px}}
/* Fade the actual bitmap edge, not the letterboxed image element. */
.reference-inner{z-index:1}
.reference-hero::after{content:"";position:absolute;z-index:0;pointer-events:none;top:0;left:0;right:0;height:100px;background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.8) 22%,rgba(255,255,255,0) 100%)}
.reference-art img{mask-image:linear-gradient(to bottom,transparent 0,#000 82px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 82px)}
@media(min-width:801px) and (max-width:1200px){.reference-art img{position:absolute;bottom:0;left:0;right:0;width:100%;height:auto;object-fit:initial}}
@media(max-width:800px){.reference-art img{mask-image:linear-gradient(to bottom,transparent 0,#000 64px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 64px)}}

/* Mobile: one continuous hero, with the devices directly beneath the headline. */
@media(max-width:800px){
  .reference-hero{display:grid;grid-template-columns:minmax(22px,1fr) minmax(0,600px) minmax(22px,1fr);padding:26px 0 32px;background:radial-gradient(ellipse at 85% 25%,#d8f1fa88,transparent 58%),linear-gradient(180deg,#fff 0%,#eff9fc 44%,#f7fbfd 100%)}
  .reference-hero::after{display:none}
  .reference-inner,.reference-copy{display:contents}
  .reference-copy>*{grid-column:2;position:relative;z-index:2}
  .reference-eyebrow{grid-row:1;text-align:center;font-size:12px;line-height:1.8;letter-spacing:.035em;margin:0 0 12px}
  .reference-copy h1{grid-row:2;text-align:center;line-height:1.3}
  .reference-title-first{font-size:clamp(42px,7.5vw,58px)}
  .reference-title-second{font-size:clamp(24px,6.7vw,39px);margin-top:5px;white-space:normal;text-wrap:balance}
  .reference-lead{grid-row:3;text-align:center;margin:14px 0 0;font-size:16px;line-height:1.65;letter-spacing:.025em}
  .reference-lead>span{font-size:14px;letter-spacing:.075em}
  .reference-art{grid-column:1/-1;grid-row:4;position:relative;inset:auto;z-index:0;width:100%;height:82.5vw;margin-top:-8px;transform:none!important;overflow:hidden}
  .reference-art img{position:relative;width:165%;left:-65%;height:auto;max-width:none;object-fit:initial;mask-image:linear-gradient(to bottom,transparent 0,#000 60px,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 60px,#000 82%,transparent 100%)}
  .reference-handwriting{grid-column:1/-1;grid-row:4;position:relative;inset:auto;align-self:start;justify-self:end;z-index:1;margin:24px 28px 0 0;font-size:18px}
  .reference-caption{grid-column:1/-1;grid-row:4;position:relative;inset:auto;align-self:end;justify-self:center;z-index:2;margin:0 0 18px;padding:9px 15px;font-size:12px;line-height:1.7;transform:none!important}
  .reference-description{grid-row:5;width:100%;max-width:560px;justify-self:center;font-size:14px;line-height:1.9;margin:0;color:#536d8d}
  .reference-actions{grid-row:6;justify-content:center;gap:12px;margin:20px 0 0}
  .reference-actions .button{min-width:0;flex:1;max-width:250px;min-height:48px;font-size:14px;gap:14px;padding:12px 14px;white-space:nowrap}
  .reference-availability{grid-row:7;justify-content:center;flex-wrap:wrap;gap:10px 20px;margin:18px 0 0;font-size:12px}
  .reference-availability img{width:17px;height:17px}
}
@media(max-width:520px){
  .reference-hero{padding-top:20px;padding-bottom:28px}
  .reference-eyebrow{font-size:11px;letter-spacing:0;margin-bottom:10px}
  .reference-lead{font-size:14px;margin-top:12px}
  .reference-lead>span{font-size:13px}
  .reference-handwriting{margin:18px 20px 0 0;font-size:15px}
  .reference-caption{font-size:11px;margin-bottom:10px;padding:8px 13px}
  .reference-actions{gap:10px;margin-top:18px}
  .reference-actions .button{font-size:13px;gap:10px;padding:12px 10px}
  .reference-availability{font-size:11px;gap:8px 14px;margin-top:16px}
}