/* Hero «A2»: split black/light first view with a browser and phone mockup.
   Mockup images in /assets/mockup are generated, fictional scenes and people. */

.hero-a{background:var(--paper);color:var(--ink);align-items:center}
.hero-a .hero-inner{padding-top:7rem;padding-bottom:4rem}
.hero-a .hero-meta{color:#9a9a96}
.ha-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.hero-a h1{font-size:clamp(2.4rem,3.9vw,3.8rem);line-height:1.02;font-weight:700;margin-bottom:1.3rem;animation:none}
.ha-lead{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--ink-soft);max-width:520px;margin-bottom:1.5rem}
.ha-points{list-style:none;padding:0;margin:0 0 1.9rem;max-width:520px}
.ha-points li{position:relative;padding:.5rem 0 .5rem 1.7rem;border-top:1px solid var(--line-light);font-size:1.02rem;color:var(--ink)}
.ha-points li:last-child{border-bottom:1px solid var(--line-light)}
.ha-points li::before{content:"✓";position:absolute;left:0;top:.5rem;color:#3f7a55;font-weight:700}
.ha-points .ex{background:rgba(120,187,139,.22);color:#2f6b45;border-radius:7px;padding:.05rem .42rem;font-weight:700}
.ha-cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.hero-a .button-mint{background:#141414;color:#fff}
.hero-a .button-mint:hover{background:#2b2b28}
.ha-link{font-weight:700;border-bottom:2px solid var(--sage);color:var(--ink)}
.ha-link:hover{color:#2f6b45}

/* --- browser mockup: sizes in em so the whole thing scales with the column --- */
.ha-visual{position:relative;padding-bottom:5rem}
.ha-browser{width:90%;font-size:clamp(8.5px,.72vw,11px);background:#fff;border:1px solid #e4e4e0;border-radius:1.1em;box-shadow:0 34px 80px rgba(20,20,20,.16),0 2px 6px rgba(20,20,20,.06);overflow:hidden;color:#141414}
.ha-bar{display:flex;align-items:center;gap:.5em;padding:.8em 1em;background:#f1f1ee;border-bottom:1px solid #e4e4e0}
.ha-bar i{width:.85em;height:.85em;border-radius:50%;background:#d6d6d2}
.ha-url{margin-left:1.2em;flex:1;display:flex;align-items:center;gap:.5em;background:#fff;border-radius:.6em;padding:.38em .9em;font-size:.95em;color:#6d6d6a;letter-spacing:.02em}
.ha-url svg{color:#3f7a55;flex-shrink:0}
.ha-site{padding:1.3em 1.6em 1.5em}
.ha-site-nav{display:flex;gap:1.5em;align-items:center;font-size:1em;color:#6d6d6a;margin-bottom:1.6em}
.ha-site-nav b{display:flex;align-items:center;gap:.5em;color:#141414;font-size:1.25em;margin-right:auto;letter-spacing:-.02em;white-space:nowrap}
.ha-site-nav b i{width:.55em;height:.55em;background:var(--sage)}
.ha-site-nav em{font-style:normal;font-weight:700;color:#141414;border:1px solid #141414;border-radius:999px;padding:.35em .9em}
.ha-site-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:1.6em;align-items:center}
.ha-site-copy small{display:block;font-size:.85em;letter-spacing:.14em;text-transform:uppercase;color:#6d6d6a;margin-bottom:.7em}
.ha-site-copy h4{margin:0 0 .5em;font-size:2em;line-height:1.08;letter-spacing:-.03em;color:#141414}
.ha-site-copy p{font-size:1.05em;color:#4a4a47;margin-bottom:1.1em}
.ha-site-copy em{display:inline-block;font-style:normal;font-size:.95em;font-weight:700;background:#141414;color:#fff;border-radius:999px;padding:.55em 1.2em}
.ha-site-photo{aspect-ratio:4/3;border-radius:.8em;overflow:hidden;background:
  radial-gradient(60% 50% at 70% 35%,rgba(255,255,255,.35),transparent 70%),
  linear-gradient(160deg,#9bb1a0,#4c6b57 55%,#2d3f34)}
.ha-site-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ha-site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;margin-top:1.6em;padding-top:1.3em;border-top:1px solid #e4e4e0}
.ha-site-cards div{border:1px solid #e4e4e0;border-radius:.7em;padding:.8em .9em}
.ha-site-cards b{display:block;font-size:1.05em;margin-bottom:.15em}
.ha-site-cards span{font-size:.9em;color:#6d6d6a}

/* --- phone: device and status bar (shared) --- */
.ha-phone{position:absolute;right:-3%;bottom:-2%;width:33%;max-width:200px;font-size:clamp(7.5px,.6vw,9.5px);background:#0b0b0b;border-radius:3.2em;padding:.75em;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 40px 80px rgba(20,20,20,.3),0 4px 12px rgba(20,20,20,.15)}
.ha-screen{position:relative;background:#fff;border-radius:2.6em;padding:1.1em 1.2em 3.6em;overflow:hidden;color:#141414}
.ha-screen::before{content:"";position:absolute;top:.75em;left:50%;transform:translateX(-50%);width:32%;height:1.6em;background:#0b0b0b;border-radius:999px}
.ha-status{display:flex;justify-content:space-between;align-items:center;font-size:1.05em;font-weight:700;padding:0 .4em;margin-bottom:1.2em}
.ha-icons{display:flex;align-items:center;gap:.45em}
.ha-sig{display:flex;gap:.18em;align-items:flex-end}
.ha-sig i{width:.3em;background:#141414;border-radius:.1em}
.ha-sig i:nth-child(1){height:.45em}.ha-sig i:nth-child(2){height:.65em}.ha-sig i:nth-child(3){height:.85em}.ha-sig i:nth-child(4){height:1.05em}
.ha-wifi{width:1.35em;height:1em;display:block}
.ha-bat{position:relative;width:2.1em;height:1.05em;border:1.5px solid #141414;border-radius:.32em;box-sizing:border-box}
.ha-bat::before{content:"";position:absolute;left:.12em;top:.12em;bottom:.12em;width:72%;background:#141414;border-radius:.15em}
.ha-bat::after{content:"";position:absolute;right:-.35em;top:30%;height:40%;width:.2em;background:#141414;border-radius:0 .1em .1em 0}
.ha-mail-top{display:flex;justify-content:space-between;align-items:baseline;gap:.6em}
.ha-mail-top time{font-size:.9em;color:#8f908c;white-space:nowrap}

/* --- inbox style 2: Gmail --- */
.ha-phone-g .ha-screen{padding-bottom:8em}
.ha-gsearch{display:flex;align-items:center;gap:.7em;background:#efefec;border-radius:999px;padding:.55em .7em .55em .9em;font-size:1em;color:#5f5f5c;margin-bottom:1.1em}
.ha-burger{width:1.1em;height:.75em;border-top:1.5px solid #5f5f5c;border-bottom:1.5px solid #5f5f5c;position:relative;box-sizing:border-box;flex-shrink:0}
.ha-burger::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .75px);height:1.5px;background:#5f5f5c}
.ha-gsearch em{margin-left:auto;font-style:normal;font-weight:700;font-size:.85em;width:2.1em;height:2.1em;border-radius:50%;background:#2f6b45;color:#fff;display:flex;align-items:center;justify-content:center}
.ha-glabel{font-size:.85em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6d6d6a;padding:0 .2em .5em}
.ha-glabel small{display:block;font-size:1em;font-weight:400;letter-spacing:0;text-transform:none;color:#3f7a55;margin-top:.2em}
.ha-gmail{display:grid;grid-template-columns:2.9em minmax(0,1fr) 1.3em;gap:.7em;align-items:start;padding:.7em .1em;border-bottom:1px solid #eeeeea}
.ha-gmail:last-of-type{border-bottom:0}
.av{position:relative;width:2.9em;height:2.9em;border-radius:50%;overflow:hidden;color:#fff;font-style:normal;font-weight:700;font-size:1.1em;display:flex;align-items:center;justify-content:center;margin-top:.1em}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av1{background:#5b86c7}.av2{background:#c9803a}.av3{background:#5e9a74}
.ha-gmail .ha-mail-top b{font-size:1.15em;font-weight:400;color:#2a2a28}
.ha-gmail strong{display:block;font-size:1.02em;font-weight:400;color:#2a2a28;margin:.15em 0 .1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-gmail span{display:block;font-size:.95em;color:#6d6d6a;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-gmail.unread .ha-mail-top b,.ha-gmail.unread strong{font-weight:700;color:#141414}
.ha-gmail.unread .ha-mail-top time{color:#141414;font-weight:700}
.ha-star{width:1.3em;height:1.3em;margin-top:.9em}
.ha-gcompose{position:absolute;right:1.1em;bottom:4.6em;display:flex;align-items:center;gap:.5em;background:#fff;color:#141414;font-weight:700;font-size:1em;padding:.75em 1.1em;border-radius:1.2em;box-shadow:0 6px 18px rgba(0,0,0,.18),0 0 0 1px #ecece9}
.ha-gcompose svg{width:1.4em;height:1.4em;color:#c0392b}
.ha-gbar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:center;padding:.6em 1em .9em;background:#f5f5f3;border-top:1px solid #e8e8e5;font-size:.85em;color:#6d6d6a}
.ha-gbar span{display:flex;flex-direction:column;align-items:center;gap:.25em}
.ha-gbar svg{width:1.7em;height:1.7em;color:#8f908c}
.ha-gbar .on{color:#141414;font-weight:700}
.ha-gbar .on svg{color:#c0392b;background:#fbe3e0;border-radius:999px;padding:.15em .6em;width:2.9em;box-sizing:content-box}

.js .ha-visual{animation:ha-in 1s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes ha-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(max-width:900px){.ha-grid{grid-template-columns:1fr;gap:2.6rem}.hero-a{align-items:flex-start}.hero-a .hero-inner{padding-top:6rem;padding-bottom:3.5rem}.ha-visual{max-width:560px;padding-bottom:3rem}.hero-a h1{font-size:clamp(2.1rem,8.5vw,3.2rem)}.ha-browser{font-size:clamp(8px,2.1vw,11px)}.ha-phone{font-size:clamp(7px,1.75vw,9.5px);right:0;width:38%;max-width:180px}}
@media(max-width:760px){.ha-site-nav span:nth-of-type(3),.ha-site-nav span:nth-of-type(4){display:none}.hero-a{min-height:auto}.ha-cta .button{width:100%}.ha-visual{margin-top:0}}
.hero-a.hero-dark{color:var(--white)}
.hero-a.hero-dark .kicker{color:var(--muted)}
.hero-a.hero-dark .hero-meta{color:#5c5c58}
.hero-a.hero-dark .ha-lead{color:#d4d4d0}
.hero-a.hero-dark .ha-points li{color:var(--white);border-color:var(--line)}
.hero-a.hero-dark .ha-points li::before{color:var(--sage)}
.hero-a.hero-dark .ha-points .ex{background:rgba(120,187,139,.18);color:var(--sage-bright)}
.hero-a.hero-dark .button-mint{background:var(--white);color:#0c0c0c}
.hero-a.hero-dark .button-mint:hover{background:#e9e9e5}
.hero-a.hero-dark .ha-link{color:var(--white)}
.hero-a.hero-dark .ha-link:hover{color:var(--sage)}
.hero-a.hero-dark .ha-browser{box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.hero-a.hero-dark .ha-phone{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 28px 60px rgba(0,0,0,.6)}

.hero-a.hero-a2{background:linear-gradient(180deg,#050505,#0c0c0c 60%,#101010)}
.hero-a.hero-a2::after{content:"";position:absolute;top:0;bottom:0;right:0;width:50%;background:var(--paper);clip-path:polygon(20% 0,100% 0,100% 100%,0 100%);z-index:0}
.hero-a.hero-a2 .hero-inner{position:relative;z-index:1}
.hero-a.hero-a2 .hero-meta{z-index:1}
/* the fixed header is its own stacking context, so the blend must sit on the header itself:
   white nav text turns black over the light field and stays white over black; once scrolled the dark bar takes over */
body:has(.hero-a2) header:not(.scrolled){mix-blend-mode:difference}
.hero-a.hero-a2 .ha-browser{box-shadow:0 30px 70px rgba(0,0,0,.35),0 2px 6px rgba(20,20,20,.08)}
.hero-a.hero-a2 .ha-phone{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 28px 60px rgba(0,0,0,.35)}
@media(max-width:900px){.hero-a.hero-a2::after{display:none}.hero-a.hero-a2 .ha-visual{background:var(--paper);border-radius:18px;padding:1.6rem 1.2rem 4.6rem;clip-path:polygon(0 7%,100% 0,100% 100%,0 100%);max-width:none}.hero-a.hero-a2 .ha-phone{right:4%;bottom:1.2rem}}

/* status bar: a three-column row reserves the island's width in the middle,
   so time and icons can never slide under it, whatever the mockup's font size */
.ha-screen::before{width:5.4em;height:1.5em;top:.8em}
.ha-status{display:grid;grid-template-columns:1fr 6em 1fr;align-items:center;font-size:1em;padding:0;margin:0 -.3em 1.2em}
.ha-status>span:first-child{justify-self:start;padding-left:.7em}
.ha-icons{grid-column:3;justify-self:end;gap:.3em;padding-right:.5em}
.ha-sig{gap:.13em}
.ha-sig i{width:.24em}
.ha-sig i:nth-child(1){height:.4em}.ha-sig i:nth-child(2){height:.58em}.ha-sig i:nth-child(3){height:.76em}.ha-sig i:nth-child(4){height:.94em}
.ha-wifi{width:1.1em;height:.85em}
.ha-bat{width:1.75em;height:.9em;border-width:1.2px;border-radius:.28em}
.ha-bat::after{right:-.3em;width:.16em}

/* Phones and tablets: scale the whole mockup with its column (container units), so browser
   and phone keep the desktop proportions instead of reflowing their text at a tiny size. */
.ha-visual{container-type:inline-size}
.ha-browser{font-size:calc(100cqw / 55)}
.hero-a.hero-a2 .ha-phone,.ha-phone{font-size:calc(100cqw / 70);width:33%;max-width:none}
@media(max-width:900px){
  .hero-a.hero-a2 .ha-phone,.ha-phone{right:2%}
  .ha-site-nav span:nth-of-type(3),.ha-site-nav span:nth-of-type(4){display:revert}
}
/* headline never leaves a single word on its own line */
.hero-a h1{text-wrap:balance}
/* sender names stay on one line in the inbox */
.ha-mail-top b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* site-v2.js fades .hero-inner while scrolling; the light wedge is outside it and would stay,
   leaving ghosted mockups on a solid field. Keep this hero opaque and let only the parallax run. */
.hero-a2 .hero-inner{opacity:1!important}
/* small icons drawn with borders must scale with the mockup's font size */
.ha-url svg{width:.8em;height:.95em}
.ha-burger{border-top-width:.13em;border-bottom-width:.13em}
.ha-burger::after{height:.13em;top:calc(50% - .065em)}

/* ---- browser: Chrome-like chrome, deliberately not macOS ---- */
.ha-tabs{display:flex;align-items:flex-end;gap:.4em;padding:.55em .8em 0;background:#dfe3e8;font-size:.92em;color:#3c4043}
.ha-tab{position:relative;display:flex;align-items:center;gap:.55em;max-width:58%;padding:.55em .9em .6em;background:#fff;border-radius:.75em .75em 0 0;white-space:nowrap;overflow:hidden}
.ha-tab::before,.ha-tab::after{content:none}
.ha-tab em{font-style:normal;margin-left:auto;padding-left:.8em;color:#5f6368}
.ha-fav{width:1em;height:1em;border-radius:.2em;background:var(--sage);flex-shrink:0}
.ha-newtab{padding:0 .5em .55em;color:#5f6368;font-size:1.15em}
.ha-win{margin-left:auto;display:flex;gap:1.5em;align-self:center;padding:0 .3em .35em}
.ha-win i{position:relative;width:.95em;height:.95em}
.ha-win .min::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#3c4043}
.ha-win .max{border:1px solid #3c4043;width:.8em;height:.8em}
.ha-win .cls::before,.ha-win .cls::after{content:"";position:absolute;left:-.05em;right:-.05em;top:50%;height:1px;background:#3c4043;transform:rotate(45deg)}
.ha-win .cls::after{transform:rotate(-45deg)}
.ha-bar{display:flex;align-items:center;gap:.9em;padding:.5em .9em;background:#fff;border-bottom:1px solid #e3e3e0}
.ha-bar>i{display:none}
.ha-nav,.ha-tools{display:flex;align-items:center;gap:.75em;color:#5f6368}
.ha-nav svg,.ha-tools svg{width:1.25em;height:1.25em;display:block}
.ha-nav svg:nth-child(2){color:#c4c7c5}
.ha-url{margin-left:0;flex:1;background:#eef1f4;border-radius:999px;padding:.45em 1em;color:#202124}
.ha-url svg{width:.8em;height:.95em;color:#5f6368}
.ha-prof{width:1.6em;height:1.6em;border-radius:50%;background:#2f6b45;color:#fff;font-style:normal;font-weight:700;font-size:.8em;display:flex;align-items:center;justify-content:center}

/* ---- phone: titanium iPhone frame, side buttons, home indicator ---- */
.ha-phone{background:linear-gradient(145deg,#6b6c70 0%,#2c2c2f 18%,#1b1b1d 50%,#2c2c2f 82%,#5d5e62 100%);padding:.3em;border-radius:3.35em;box-shadow:0 0 0 .06em rgba(255,255,255,.25) inset,0 40px 80px rgba(20,20,20,.32),0 6px 14px rgba(20,20,20,.18)}
.hero-a.hero-a2 .ha-phone{box-shadow:0 0 0 .06em rgba(255,255,255,.25) inset,0 34px 70px rgba(0,0,0,.35),0 6px 14px rgba(0,0,0,.18)}
.ha-phone::before{content:"";position:absolute;left:-.2em;top:17%;width:.22em;height:1.9em;border-radius:.2em 0 0 .2em;background:#3a3b3e;box-shadow:0 3.1em 0 0 #3a3b3e,0 6.1em 0 0 #3a3b3e}
.ha-phone::after{content:"";position:absolute;right:-.2em;top:27%;width:.22em;height:4.2em;border-radius:0 .2em .2em 0;background:#3a3b3e}
.ha-screen{border:.5em solid #050505;border-radius:3.05em}
.ha-screen::before{top:.45em;width:5.2em;height:1.55em}
.ha-status{margin-top:-.2em}
/* Gmail bottom bar with room for the home indicator, compose button well clear of it */
.ha-phone-g .ha-screen{padding-bottom:9.6em}
.ha-gbar{padding:.7em 1em 2em;background:#f6f7f9;border-top:1px solid #e6e7ea}
.ha-ico{position:relative;display:block}
.ha-gbar .on .ha-ico svg{display:block}
.ha-badge{position:absolute;top:-.35em;right:-.15em;min-width:1.4em;height:1.4em;padding:0 .3em;border-radius:999px;background:#d93025;color:#fff;font-size:.75em;font-weight:700;line-height:1.4em;text-align:center}
.ha-home{position:absolute;left:50%;bottom:.55em;transform:translateX(-50%);width:36%;height:.32em;border-radius:999px;background:#111}
.ha-gcompose{bottom:6.2em;right:1em;border-radius:1.1em;padding:.85em 1.2em;box-shadow:0 4px 14px rgba(0,0,0,.16),0 0 0 1px #ecece9}
/* the old dot rule (.ha-bar i) would otherwise shrink and grey the profile badge */
.ha-bar .ha-prof{width:1.6em;height:1.6em;border-radius:50%;background:#2f6b45;color:#fff}
/* the bezel narrows the screen, so the island gets a slimmer pill and the status row a wider gap */
.ha-screen::before{width:4.6em}
.ha-status{grid-template-columns:1fr 6.6em 1fr}
.ha-icons{padding-right:.2em}