.hero{position:relative;padding-top:clamp(1.5rem,.5rem + 3vw,4rem);padding-bottom:var(--space-section);overflow-x:clip}
.hero-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"copy bird" "browser browser";column-gap:clamp(1rem,4vw,4rem);row-gap:clamp(1.5rem,3vw,2.5rem)}
.hero-copy{grid-area:copy;position:relative;z-index:2;align-self:center}
.hero h1{margin-top:1.5rem;font-size:var(--text-h1);font-weight:300;letter-spacing:-.055em;line-height:.9;text-wrap:balance}
.hero-lead{max-width:31rem;margin-top:1.75rem;color:var(--mist);font-size:var(--text-lead);text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.hero-note{margin-top:1.25rem;color:var(--pewter);font-size:var(--text-small)}

.hero-bird{grid-area:bird;position:relative;justify-self:end;width:min(100%,560px);aspect-ratio:1}
.hero-bird picture{display:contents}
.hero-bird-image{width:100%;height:100%;filter:drop-shadow(0 40px 60px #000a)}
/* 995 / 1254 and 215 / 1254: the restored raster's dark eye mask. */
.eye-button{position:absolute;left:79.3461%;top:17.1451%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:transparent}
.eye-button span{width:11px;height:11px;border-radius:50%;background:var(--amethyst);box-shadow:0 0 18px 5px #b49bff99;transition:transform var(--duration-normal) var(--ease),box-shadow var(--duration-normal)}
.eye-button:hover span,.eye-button[aria-expanded=true] span{transform:scale(1.35);box-shadow:0 0 0 7px #b49bff33,0 0 26px 8px #b49bffaa}

.hero-beam{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero-beam path{fill:none;stroke:var(--amethyst);stroke-width:1.5;stroke-linecap:round;filter:drop-shadow(0 0 6px #b49bff)}
.hero-beam circle{fill:var(--amethyst);filter:drop-shadow(0 0 6px #b49bff)}

.hero-browser{grid-area:browser;position:relative;z-index:2;overflow:hidden;border-radius:var(--radius-object);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-object);transform-origin:50% 0}
.browser-page{padding:clamp(1.25rem,3vw,2.5rem)}
.store-nav{display:flex;justify-content:space-between;gap:1rem;color:#5d5e63;font-size:var(--text-small)}
.store-brand{color:var(--ink);font:1.25rem Georgia,serif}
.store-product{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:clamp(1rem,4vw,3rem);margin-top:clamp(1.25rem,3vw,2.5rem)}
.store-copy>span{color:#5f6066;font-size:var(--text-label);letter-spacing:.12em;text-transform:uppercase}
.store-copy h3{margin-top:.75rem;font:400 clamp(2rem,1rem + 3.5vw,4rem)/.95 Georgia,serif;letter-spacing:-.03em}
.store-copy p{max-width:22rem;margin-top:1rem;color:#45464c}
.store-price{display:flex;align-items:baseline;gap:.75rem}
.store-price strong{color:var(--ink);font-size:1.5rem}
.hero-lamp{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:68% center;border-radius:8px}
.browser-foot{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1.25rem;background:#ece9e2;color:#45464c;font-size:var(--text-small)}
.browser-foot>span{display:inline-flex;align-items:center;gap:.5rem}

.eye-panel{position:absolute;right:clamp(.75rem,2vw,1.5rem);top:52px;z-index:3;width:min(22rem,100% - 1.5rem);padding:1.25rem;border-radius:16px;background:color-mix(in srgb,var(--obsidian) 94%,transparent);color:var(--silver);box-shadow:var(--shadow-object);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.eye-panel[hidden]{display:none}
.eye-panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.eye-panel-head strong{font-size:1.125rem;font-weight:500}
.eye-panel p{margin-top:.5rem;color:var(--mist);font-size:var(--text-small)}
.eye-facts{display:grid;margin-top:1rem}
.eye-facts div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--hairline);font-size:var(--text-small)}
.eye-facts dt{color:var(--pewter)}
.eye-facts dd{text-align:right}
.eye-panel a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin-top:.5rem;color:var(--ember);font-size:var(--text-small);text-decoration:none}

@media (max-width:899.98px){
  .hero-stage{grid-template-columns:1fr;grid-template-areas:"copy" "bird" "browser"}
  .hero-bird{justify-self:center;width:min(78%,420px);margin-block:-1rem -2rem}
}
@media (max-width:600px){
  .store-product{grid-template-columns:1fr}
  .browser-foot{flex-direction:column;align-items:flex-start;gap:.25rem}
}