:root{
  --bg:#070510;
  --text:#f7f3fb;
  --muted:#b8afc4;
  --pink:#ef57ed;
  --purple:#a653ff;
  --line:rgba(188,82,255,.24);
  --panel:rgba(13,9,27,.84);
  --shell:1320px;
  --card-radius:14px;
}

*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:2px solid #d967ff;outline-offset:3px}
@supports not selector(:focus-visible){a:focus,button:focus{outline:2px solid #d967ff;outline-offset:3px}}
html{scroll-behavior:smooth;background:var(--bg);text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none;touch-action:manipulation}
button{font:inherit;color:inherit;appearance:none;-webkit-appearance:none;touch-action:manipulation}
img{display:block;max-width:100%;height:auto;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.page-shell{width:min(var(--shell),calc(100% - clamp(32px,5vw,84px)));margin-inline:auto;position:relative;min-width:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  height:clamp(630px,47vw,720px);
  min-height:630px;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid rgba(196,83,255,.18);
  background:url('assets/backgrounds/hero-background.webp') 50% 55% / cover no-repeat;
}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,5,15,.90) 0%,rgba(6,5,15,.68) 22%,rgba(6,5,15,.20) 40%,rgba(6,5,15,.02) 67%,rgba(6,5,15,.12) 100%),linear-gradient(180deg,rgba(4,3,10,.04),transparent 58%,rgba(5,4,12,.18))}
.hero-inner{height:100%}
.hero-copy{position:absolute;z-index:10;left:0;top:50%;transform:translateY(-47%);width:min(430px,34vw)}
.eyebrow{font-size:13px;letter-spacing:2.25px;color:#dc86ff;font-weight:760;margin:0 0 12px}
.hero h1{font-size:clamp(45px,3.8vw,57px);line-height:.985;letter-spacing:-2.25px;margin:0 0 18px;font-weight:860}
.hero h1 span{color:#ef62ea;background:linear-gradient(90deg,#cf61ff 0%,#ff65dd 72%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-description{max-width:405px;margin:0 0 21px;color:#d0c8d8;font-size:clamp(14px,1.08vw,16px);line-height:1.5;letter-spacing:-.1px}
.store-row{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.hero-copy .store-row{margin-top:20px}
.store-badge{height:53px;display:flex;align-items:center;flex:0 0 auto;transition:transform .18s ease,filter .18s ease}
.store-badge:hover{transform:translateY(-2px);filter:brightness(1.05)}
.store-badge img{height:100%;width:auto;object-fit:contain}
/* Store banner: the app is not published yet, so the badge row carries a
   "coming soon" pill instead of the (dead-linked) App Store / Google Play badges.
   Heights and the responsive steps come from .store-badge above. */
.store-soon{margin:0;padding:0 20px;border-radius:999px;border:1px solid rgba(196,83,255,.45);background:linear-gradient(135deg,rgba(196,83,255,.20),rgba(120,60,255,.10));color:#f4eeff;font-size:14px;font-weight:720;letter-spacing:.01em;white-space:nowrap;box-shadow:0 10px 30px rgba(150,60,255,.20)}
.store-soon:hover{transform:none;filter:none}
.hero-tagline{color:#b4aabe;font-size:13px;margin:9px 0 0}

/* Hero artwork overlays are positioned against the full hero viewport, not the centered content shell.
   This keeps the phone between the characters and lets the "...or him." note sit on the man's right side. */
.hero-overlays{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.hero-phone{
  position:absolute;
  z-index:7;
  left:66.2%;
  top:50.5%;
  width:clamp(320px,17.4vw,356px);
  height:auto;
  object-fit:contain;
  transform:translate(-50%,-50%) rotate(4deg);
  transform-origin:center center;
  filter:drop-shadow(0 0 16px rgba(225,54,255,.32)) drop-shadow(0 18px 30px rgba(0,0,0,.40));
}
.note{position:absolute;z-index:8;pointer-events:none;object-fit:contain}
.note-create{width:clamp(106px,6.7vw,138px);left:30.2%;top:7.5%;transform:rotate(-4deg)}
.note-him{width:clamp(74px,5vw,102px);right:1.3%;top:12.8%;transform:rotate(2deg)}
.note-stories{width:clamp(100px,6.4vw,130px);left:72.3%;top:62.5%}

/* ---------------- Features / How it works / Inspiration ---------------- */
.feature-zone{position:relative;background:url('assets/backgrounds/features-background.webp') center top / cover no-repeat;overflow:hidden;border-bottom:1px solid rgba(196,83,255,.15)}
.feature-shell{padding-block:31px 35px}
.section-heading h2,.inline-heading h2{margin:0;font-weight:860;letter-spacing:-1.45px}
.section-heading h2{font-size:clamp(34px,2.8vw,41px);line-height:1.05}
.section-heading h2 span,.inline-heading h2 span{color:#df5cf4;background:linear-gradient(90deg,#ed60ef,#a55dff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-heading p{font-size:15px;line-height:1.45;color:#bcb3c8;margin:7px 0 0}
.feature-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.1vw,16px);margin-top:18px;padding-right:clamp(0px,10vw,148px)}
.feature-card{min-height:166px;border:1px solid rgba(157,74,235,.26);border-radius:10px;background:linear-gradient(180deg,rgba(15,10,31,.88),rgba(10,7,21,.80));padding:19px 17px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.05);min-width:0}
.feature-card img{width:40px;height:40px;margin-bottom:12px}
.feature-card h3{font-size:14px;line-height:1.25;margin:0 0 8px}
.feature-card p{font-size:12px;color:#aaa1b7;line-height:1.45;margin:0;max-width:180px}
.note-personalities{width:clamp(110px,9.5vw,142px);right:5px;top:68px}

.how-wrap{margin-top:34px}
.inline-heading{display:flex;align-items:baseline;gap:24px;min-width:0}
.inline-heading h2{font-size:clamp(31px,2.65vw,38px);line-height:1}
.inline-heading p{font-size:12px;color:#9f96ac;margin:0}
.steps-grid{margin-top:17px;display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr;align-items:center;gap:8px}
.step-card{min-height:96px;border:1px solid rgba(157,74,235,.26);border-radius:10px;background:rgba(12,8,26,.80);padding:14px 16px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;min-width:0}
.step-card>img{width:38px;height:38px}
.step-card h3{font-size:12px;margin:0 0 5px}
.step-card p{font-size:10px;line-height:1.4;margin:0;color:#a198ae}
.step-arrow{font-size:23px;text-align:center;color:#dd52ee}

.inspiration-wrap{margin-top:30px}
.inspiration-heading{gap:29px}
.carousel-shell{position:relative;margin-top:15px}
.inspiration-track{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;
  align-items:start;
  overflow:visible;
  scroll-behavior:smooth;
  min-width:0;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
/* Every Inspiration tile has exactly the same box model and 2:3 ratio. */
.character-card{
  appearance:none;
  display:block;
  position:relative;
  width:100%;
  min-width:0;
  max-width:none;
  aspect-ratio:2/3;
  height:auto;
  padding:0;
  flex-shrink:0;
  margin:0;
  border:0;
  border-radius:var(--card-radius);
  overflow:hidden;
  background:transparent;
  cursor:pointer;
  line-height:0;
  transition:transform .18s ease,filter .18s ease;
  filter:drop-shadow(0 7px 15px rgba(0,0,0,.24));
}
.character-card:hover{transform:translateY(-3px);filter:brightness(1.055) drop-shadow(0 9px 18px rgba(0,0,0,.30))}
.character-card:not(.create-card){background:transparent;box-shadow:none}
.character-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:fill;
  object-position:50% 50%;
  -webkit-user-select:none;
  border-radius:inherit;
}
.create-card{display:flex;aspect-ratio:2/3;width:100%;height:auto;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid rgba(174,78,255,.52);background:linear-gradient(180deg,rgba(38,18,65,.92),rgba(17,9,35,.97));border-radius:var(--card-radius);box-sizing:border-box;font-size:16px;font-weight:650;text-align:center;line-height:1.18;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.create-plus{font-size:50px;line-height:.75;font-weight:300;color:#bb5cff;text-shadow:0 0 14px rgba(193,77,255,.36)}
.carousel-arrow{display:none}

/* ---------------- Download ---------------- */
.download{height:clamp(450px,36vw,525px);position:relative;background:url('assets/backgrounds/download-background.webp') center 54% / cover no-repeat;overflow:hidden;border-bottom:1px solid rgba(196,83,255,.18)}
.download-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,14,.68) 0%,rgba(5,4,14,.48) 31%,rgba(5,4,14,.04) 58%,rgba(5,4,14,.10) 100%)}
.download-inner{height:100%}
.download-copy{position:absolute;z-index:6;left:0;top:17%;max-width:500px}
.download-copy h2{font-size:clamp(42px,3.65vw,53px);line-height:1.03;letter-spacing:-2px;margin:0 0 19px;font-weight:860}
.download-copy h2 span{color:#df62f1;background:linear-gradient(90deg,#d063ff,#ff68df);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.download-copy p{font-size:16px;line-height:1.48;color:#cfc6d7;margin:0;max-width:460px}
.download-badges{margin-top:19px}
.store-badge.large{height:61px}
.download-copy .store-soon{color:#f4eeff;font-size:15px}
.download-phones{position:absolute;z-index:5;width:clamp(430px,38vw,545px);left:50.5%;bottom:-8%;height:auto;object-fit:contain;filter:drop-shadow(0 4px 18px rgba(0,0,0,.45))}
.note-real{width:clamp(110px,9.3vw,145px);right:.5%;top:13%}

/* ---------------- Footer ---------------- */
footer{background:#070510;border-top:1px solid rgba(196,83,255,.10)}
.footer-shell{min-height:126px;display:grid;grid-template-columns:144px 1fr 300px;align-items:center;gap:32px;padding-top:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.footer-brand img{width:105px}
.footer-links{display:flex;gap:34px;flex-wrap:wrap;align-items:center}
.footer-links a{font-size:14px;font-weight:560;letter-spacing:.01em;color:#bcb3c7;transition:color .18s ease}
.footer-links a:hover{color:#fff}
.footer-note{font-size:13px;line-height:1.35;color:#b8afc1;text-align:right;margin:0}

/* ---------------- Laptop / small desktop ---------------- */
@media (max-width:1240px){
  .page-shell{width:min(1120px,calc(100% - 48px))}
  .hero{height:680px;min-height:680px;background-position:52% 55%}
  .hero-copy{width:390px}
  .hero-phone{left:66.8%;width:330px}
  .note-create{left:30.0%;top:7.8%}.note-him{right:1.2%}.note-stories{left:72.5%}
  .feature-grid{padding-right:0}
  .note-personalities{display:none}
  .download-phones{left:auto;right:1.5%;width:47vw}
  .download-copy{max-width:44vw}
  .footer-shell{grid-template-columns:122px 1fr;gap:24px}
  .footer-note{display:none}
}

/* ---------------- Tablet landscape / compact laptop ---------------- */
@media (max-width:1024px){
  .page-shell{width:min(920px,calc(100% - 40px))}
  .hero{height:720px;min-height:720px;background-position:58% 55%}
  .hero-copy{width:360px;top:54%}
  .hero h1{font-size:46px}
  .hero-description{font-size:14px}
  .hero-phone{left:68.5%;top:48%;width:292px;transform:translate(-50%,-50%) rotate(3deg)}
  .note-create{width:100px;left:30.4%;top:7.2%}
  .note-him{width:74px;right:1%;top:12%}
  .note-stories{display:none}

  .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .feature-card:nth-child(4),.feature-card:nth-child(5){min-height:150px}
  .steps-grid{grid-template-columns:1fr 1fr;gap:12px}
  .step-arrow{display:none}
  .step-card{min-height:102px}

  .inspiration-track{display:flex;overflow-x:auto;overflow-y:hidden;gap:14px;padding:0 2px 12px;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .inspiration-track::-webkit-scrollbar{display:none}
  .character-card{flex:0 0 205px;width:205px;scroll-snap-align:start;scroll-snap-stop:always}

  .download{height:650px;background-position:60% center}
  .download-shade{background:linear-gradient(180deg,rgba(5,4,14,.08),rgba(5,4,14,.24) 48%,rgba(5,4,14,.86) 71%,rgba(5,4,14,.99))}
  .download-copy{left:0;right:0;top:auto;bottom:35px;z-index:8;max-width:580px}
  .download-copy h2{font-size:44px}
  .download-copy p{font-size:14px}
  .download-phones{width:410px;right:50%;transform:translateX(50%);bottom:134px}
  .note-real{width:105px;right:4%;top:50px}

  .footer-shell{min-height:150px;grid-template-columns:110px 1fr auto;gap:24px;padding-block:28px}
  .footer-links{gap:18px 24px}
  .footer-links a{font-size:13px}
}

/* ---------------- Tablet portrait / large phones ---------------- */
@media (max-width:820px){
  .page-shell{width:min(720px,calc(100% - 32px))}
  .hero{height:860px;min-height:860px;background-position:center top;background-size:140% auto;background-repeat:no-repeat}
  .hero-shade{background:linear-gradient(180deg,rgba(5,4,14,.07) 0%,rgba(5,4,14,.14) 42%,rgba(5,4,14,.70) 63%,rgba(5,4,14,.98) 77%,rgba(5,4,14,1) 100%)}
  .hero-copy{left:0;right:0;top:auto;bottom:30px;transform:none;width:min(600px,100%);z-index:12}
  .hero h1{font-size:clamp(42px,7vw,50px);max-width:580px}
  .hero-description{font-size:15px;max-width:570px}
  .hero-phone{left:70.5%;right:auto;top:28px;width:246px;transform:translateX(-50%) rotate(3deg)}
  .note-create{width:86px;left:32%;top:26px}
  .note-him{width:68px;right:1.5%;top:54px}
  .note-stories{display:none}

  .feature-shell{padding-block:32px 38px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .feature-card{min-height:154px}
  .feature-card:last-child{grid-column:1/-1}
  .inline-heading{display:block}
  .inline-heading p{margin-top:8px}
  .steps-grid{grid-template-columns:1fr 1fr;gap:12px}
  .inspiration-wrap{margin-top:36px}
  .character-card{flex-basis:196px;width:196px}

  .download{height:690px;background-position:62% center}
  .download-copy{bottom:34px;max-width:none}
  .download-phones{width:420px;bottom:140px}
  .store-badge.large{height:55px}

  .footer-shell{grid-template-columns:96px 1fr;gap:22px;min-height:180px}
  .footer-brand img{width:88px}
}

/* ---------------- Phones ---------------- */
@media (max-width:600px){
  .page-shell{width:calc(100% - 24px)}
  .hero{height:780px;min-height:780px;background-position:center top;background-size:155% auto;background-repeat:no-repeat}
  .hero-copy{bottom:24px}
  .eyebrow{font-size:11px;letter-spacing:1.8px;margin-bottom:9px}
  .hero h1{font-size:38px;letter-spacing:-1.55px;margin-bottom:14px}
  .hero-description{font-size:14px;line-height:1.45;margin-bottom:17px}
  .hero-phone{left:71.5%;top:18px;width:190px;transform:translateX(-50%) rotate(3deg)}
  .note-create{width:72px;left:31.5%;top:20px}
  .note-him{display:none}
  .store-row{gap:7px;margin-top:13px}
  .store-badge{height:43px}
  .store-soon{padding:0 15px;font-size:13px}
  .hero-tagline{font-size:12px;margin-top:8px}

  .section-heading h2{font-size:33px}
  .section-heading p{font-size:14px}
  .feature-grid{grid-template-columns:1fr}
  .feature-card,.feature-card:last-child{grid-column:auto;min-height:140px}
  .how-wrap{margin-top:36px}
  .inline-heading h2{font-size:32px}
  .steps-grid{grid-template-columns:1fr}
  .step-card{min-height:92px}
  .character-card{flex:0 0 min(72vw,190px);width:min(72vw,190px)}

  .download{height:630px;background-position:63% center}
  .download-phones{width:345px;bottom:158px}
  .download-copy h2{font-size:38px;letter-spacing:-1.4px}
  .download-copy p{max-width:360px}
  .store-badge.large{height:47px}
  .note-real{display:none}

  .footer-shell{grid-template-columns:1fr;gap:22px;min-height:245px;padding-block:30px;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
  .footer-brand img{width:96px}
  .footer-links{gap:16px 24px}
  .footer-links a{font-size:14px}
}

@media (max-width:420px){
  .hero{height:748px;min-height:748px;background-position:center top;background-size:168% auto;background-repeat:no-repeat}
  .hero h1{font-size:35px}
  .hero-phone{left:72%;top:14px;width:176px}
  .store-badge{height:40px}
  .character-card{flex-basis:176px;width:176px}
  .download{height:610px}
  .download-phones{width:325px;bottom:165px}
  .download-copy h2{font-size:35px}
}



/* ---------------- Responsive & cross-browser hardening ---------------- */
/* Keep long copy and store badges from overflowing when browser text scaling differs. */
.hero-copy,.download-copy,.feature-card,.step-card,.footer-links{overflow-wrap:anywhere}
.store-row{max-width:100%}
.store-badge img{max-width:100%}
.inspiration-track{touch-action:pan-x pan-y}
.character-card{-webkit-tap-highlight-color:transparent}

/* Large tablets / narrow desktop windows: prevent the hero copy and phone from colliding. */
@media (min-width:821px) and (max-width:1180px){
  .hero-copy{max-width:37vw}
  .hero h1{font-size:clamp(41px,4.3vw,49px)}
  .hero-description{font-size:13.5px}
  .hero-phone{width:clamp(270px,27vw,320px);left:68%}
}

/* Phone-sized landscape viewports (Safari/Chrome/Firefox). */
@media (max-width:950px) and (max-height:560px) and (orientation:landscape){
  .page-shell{width:calc(100% - 32px)}
  .hero{height:560px;min-height:560px;background-position:56% 54%}
  .hero-shade{background:linear-gradient(90deg,rgba(6,5,15,.91) 0%,rgba(6,5,15,.66) 34%,rgba(6,5,15,.12) 60%,rgba(6,5,15,.08) 100%)}
  .hero-copy{left:0;top:50%;bottom:auto;transform:translateY(-48%);width:min(340px,43vw);max-width:43vw}
  .eyebrow{font-size:10px;letter-spacing:1.6px;margin-bottom:7px}
  .hero h1{font-size:clamp(31px,5.2vw,40px);line-height:.98;letter-spacing:-1.25px;margin-bottom:10px}
  .hero-description{font-size:11.5px;line-height:1.35;margin-bottom:10px;max-width:330px}
  .hero-copy .store-row{margin-top:10px;gap:6px}
  .store-badge{height:36px}
  .hero-tagline{font-size:10.5px;margin-top:6px}
  .hero-phone{left:67.5%;top:50%;width:min(218px,24vw);transform:translate(-50%,-50%) rotate(3deg)}
  .note-create{width:72px;left:30%;top:8%}
  .note-him,.note-stories{display:none}
}

/* Very narrow devices and accessibility text scaling. */
@media (max-width:380px){
  .page-shell{width:calc(100% - 20px)}
  .hero{height:850px;min-height:850px}
  .hero h1{font-size:33px}
  .hero-description{font-size:13.5px}
  .hero-phone{left:74%;width:194px}
  .note-create{left:30%;width:72px}
  .store-badge{height:38px}
  .feature-shell{padding-block:28px 34px}
  .section-heading h2{font-size:31px}
  .character-card{flex-basis:170px;width:170px}
  .download-copy h2{font-size:33px}
}

/* Dynamic viewport units are an enhancement only; pixel heights above remain the fallback. */
@supports (height:100svh){
  @media (max-width:820px) and (orientation:portrait){
    .hero{height:max(840px,100svh);min-height:max(840px,100svh)}
  }
}

/* Safari supports -webkit-fill-available on older versions; avoid accidental horizontal page growth. */
@supports (-webkit-touch-callout:none){
  body{min-height:-webkit-fill-available}
  .inspiration-track{scroll-snap-type:x mandatory}
}

/* Firefox does not use WebKit text fill; preserve the gradient/fallback text. */
@supports not (-webkit-text-fill-color:transparent){
  .hero h1 span,.section-heading h2 span,.inline-heading h2 span,.download-copy h2 span{color:#e760ee}
}

@media (max-width:820px) and (orientation:landscape){
  .hero{height:700px;min-height:700px;background-size:120% auto;background-position:center top}
  .hero-copy{bottom:20px;width:min(520px,100%)}
  .hero-phone{top:16px;width:210px;left:72%}
  .note-create{top:18px;left:33%;width:78px}
}

@media (hover:none){
  .store-badge:hover,.character-card:hover{transform:none;filter:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .store-badge,.character-card,.footer-links a{transition:none}
}

/* ============================================================
   V11: authoritative mobile/tablet hero layout
   Fixes the empty/black band caused by a short no-repeat background
   inside a much taller fixed hero. On portrait devices the artwork is
   now a dedicated top visual layer and the copy stays in normal flow.
   ============================================================ */

/* Older Safari fallback before overflow-x:clip. */
body{overflow-x:hidden;overflow-x:clip}

@media (max-width:820px) and (orientation:portrait){
  .hero{
    --hero-art-h:clamp(430px,64vw,520px);
    isolation:isolate;
    height:auto;
    min-height:0;
    padding:0;
    background:
      radial-gradient(ellipse at 58% 23%,rgba(81,29,137,.34) 0%,rgba(29,12,58,.16) 34%,rgba(7,5,16,0) 62%),
      #070510;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0 0 auto 0;
    height:var(--hero-art-h);
    background-image:url('assets/backgrounds/hero-background.webp');
    background-repeat:no-repeat;
    background-size:auto 100%;
    background-position:55% top;
    pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    top:calc(var(--hero-art-h) - 138px);
    height:168px;
    background:linear-gradient(180deg,rgba(7,5,16,0) 0%,rgba(7,5,16,.36) 26%,rgba(7,5,16,.86) 67%,#070510 100%);
    pointer-events:none;
  }
  .hero-shade{
    z-index:1;
    inset:0 0 auto 0;
    height:var(--hero-art-h);
    background:linear-gradient(90deg,rgba(7,5,16,.18) 0%,rgba(7,5,16,0) 36%,rgba(7,5,16,.02) 72%,rgba(7,5,16,.16) 100%);
  }
  .hero-inner{
    height:auto;
    min-height:0;
    padding-top:calc(var(--hero-art-h) - 52px);
    padding-bottom:28px;
    z-index:10;
  }
  .hero-copy{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    transform:none;
    width:100%;
    max-width:620px;
    z-index:12;
  }
  .hero-phone{
    left:69.5%;
    right:auto;
    top:calc(24px + env(safe-area-inset-top));
    width:clamp(210px,31vw,255px);
    transform:translateX(-50%) rotate(3deg);
  }
  .note-create{
    left:32.5%;
    top:calc(22px + env(safe-area-inset-top));
    width:86px;
  }
  .note-him{
    right:1.5%;
    top:calc(50px + env(safe-area-inset-top));
    width:68px;
  }
  .note-stories{display:none}
}

@media (max-width:600px) and (orientation:portrait){
  .hero{--hero-art-h:clamp(350px,98vw,430px)}
  .hero::before{background-position:56% top}
  .hero-inner{padding-top:calc(var(--hero-art-h) - 40px);padding-bottom:24px}
  .hero-copy{max-width:none}
  .hero-phone{
    left:72%;
    top:calc(16px + env(safe-area-inset-top));
    width:clamp(164px,47vw,198px);
  }
  .note-create{
    left:31.5%;
    top:calc(18px + env(safe-area-inset-top));
    width:72px;
  }
  .note-him{display:none}
  .hero h1{font-size:clamp(35px,9.75vw,40px);line-height:.98;letter-spacing:-1.45px}
  .hero-description{font-size:14px;line-height:1.46}
  .hero-copy .store-row{margin-top:14px;gap:8px;flex-wrap:nowrap}
  .store-badge{height:42px;min-width:0}
  .hero-tagline{font-size:12px}
}

@media (max-width:420px) and (orientation:portrait){
  .hero{--hero-art-h:clamp(330px,100vw,390px)}
  .hero::before{background-position:56.5% top}
  .hero-inner{padding-top:calc(var(--hero-art-h) - 34px);padding-bottom:22px}
  .hero-phone{left:72.5%;top:calc(13px + env(safe-area-inset-top));width:clamp(150px,45vw,176px)}
  .note-create{left:31%;top:calc(16px + env(safe-area-inset-top));width:66px}
  .hero h1{font-size:clamp(33px,9.4vw,37px)}
  .hero-description{font-size:13.5px}
  .store-badge{height:39px}
}

@media (max-width:350px) and (orientation:portrait){
  .hero{--hero-art-h:330px}
  .hero-phone{width:148px;left:73%}
  .note-create{width:62px;left:30.5%}
  .hero h1{font-size:32px}
  .store-badge{height:37px}
}

/* Handheld landscape is intentionally a compact desktop-like composition. */
@media (max-width:950px) and (max-height:600px) and (orientation:landscape){
  .hero::before,.hero::after{content:none}
  .hero{
    height:540px;
    min-height:540px;
    padding:0;
    background:url('assets/backgrounds/hero-background.webp') 56% 54% / cover no-repeat;
  }
  .hero-shade{inset:0;height:auto;background:linear-gradient(90deg,rgba(6,5,15,.91) 0%,rgba(6,5,15,.68) 34%,rgba(6,5,15,.12) 62%,rgba(6,5,15,.08) 100%)}
  .hero-inner{height:100%;padding:0}
  .hero-copy{position:absolute;left:0;top:50%;bottom:auto;transform:translateY(-48%);width:min(340px,43vw);max-width:43vw}
  .hero-phone{left:68%;top:50%;width:min(210px,23vw);transform:translate(-50%,-50%) rotate(3deg)}
  .note-create{left:31%;top:7%;width:70px}
  .note-him,.note-stories{display:none}
}