/* Screenshot-led homepage presentation. No Web workspace selectors. */
#homeView{--hm-shot-tone:saturate(.44) sepia(.18) contrast(.96) brightness(.99);--hm-shot-frame:#68675e}
#homeView .hm-hero{padding-top:38px;padding-bottom:28px}
#homeView .hm-hero h1{font-size:clamp(46px,5vw,72px)}
#homeView figure{margin:0}
#homeView .hm-shot{padding:0;border:0;display:block;background:#f6f2ed;position:relative;overflow:hidden;cursor:zoom-in;line-height:0;text-align:left;width:100%;color:var(--hm-ink);isolation:isolate}
#homeView .hm-shot img{display:block;width:100%;height:auto;filter:var(--hm-shot-tone);transition:transform .5s ease}
#homeView .hm-zoom-icon{position:absolute;right:14px;bottom:14px;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font:18px system-ui;background:#ffffffed;color:#494439;box-shadow:0 3px 12px #39342b12;z-index:2;transition:transform .2s}
#homeView .hm-shot:hover .hm-zoom-icon{transform:scale(1.1)}
#homeView .hm-hero-photos{max-width:1040px;height:610px;position:relative;margin:44px auto 0}
#homeView .hm-hero-photos figure{position:absolute;width:292px;top:65px}
#homeView .hm-hero-photos .hm-shot{border:6px solid var(--hm-shot-frame);border-radius:36px;box-shadow:0 34px 45px -20px #554a3e40}
#homeView .hm-hero-photos .hm-hero-left{left:60px;transform:rotate(-10deg);z-index:1}
#homeView .hm-hero-photos .hm-hero-center{width:310px;left:calc(50% - 155px);top:0;transform:rotate(-2deg);z-index:3}
#homeView .hm-hero-photos .hm-hero-right{right:60px;transform:rotate(10deg);z-index:2}
#homeView .hm-hero-photos figcaption{font-size:11px;margin-top:18px;letter-spacing:.04em;line-height:1.7}
#homeView .hm-image-disclosure{font-size:10px;max-width:760px;margin:28px auto 0}
#homeView .hm-photo-bento{grid-template-columns:1.12fr 1fr 1fr}
#homeView .hm-photo-bento .hm-tile{padding:28px 25px 0;min-height:0;height:405px}
#homeView .hm-photo-bento .hm-tile h3{font-size:21px;margin-bottom:24px}
#homeView .hm-photo-bento .hm-tile .hm-kicker{margin-bottom:15px}
#homeView .hm-tile-crop{border-radius:14px 14px 0 0;height:290px;box-shadow:0 12px 25px #46332212}
#homeView .hm-tile-crop img{position:relative}
#homeView .hm-crop-day img{margin-top:-45%}
#homeView .hm-crop-records img{margin-top:-110%}
#homeView .hm-crop-month img{margin-top:-35%}
#homeView .hm-capture-photos{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:42px}
#homeView .hm-capture-shot{height:355px;border-radius:20px;background:#fff;box-shadow:0 15px 38px #544c3410}
#homeView .hm-capture-shot img{width:100%;max-width:none}
#homeView .hm-crop-create img{margin-top:-34%}
#homeView .hm-crop-templates img{margin-top:-115%}
#homeView .hm-capture-photos figcaption{display:flex;gap:18px;margin-top:23px;line-height:1.7}
#homeView .hm-capture-photos figcaption>b{font:19px Georgia,serif;color:#9a8468;padding-top:4px}
#homeView .hm-capture-photos h3{font-size:21px}
#homeView .hm-capture-photos p{font-size:13px;color:var(--hm-muted);margin-top:9px}
#homeView .hm-photo-flow{align-items:center;grid-template-columns:1fr 1.05fr}
#homeView .hm-photo-flow .hm-flow-stage{padding:30px;position:static;min-height:0;background:#e7dfd0;border:0;display:flex;flex-direction:column;align-items:center;gap:16px}
#homeView .hm-photo-flow #hm-flow-panel{padding:0;min-height:0;background:none;box-shadow:none;max-width:285px;width:100%}
#homeView .hm-flow-image{border-radius:24px;border:4px solid var(--hm-shot-frame);box-shadow:0 18px 38px #4b3e2926}
#homeView .hm-photo-flow .hm-caption{text-align:center;margin:0;font-size:10px}
#homeView .hm-photo-views{padding-top:60px}
#homeView .hm-photo-views h2{font-size:clamp(32px,3.5vw,52px)}
#homeView .hm-screenshot-compare{display:grid;grid-template-columns:1fr 1.15fr;gap:90px;align-items:center;padding:45px 65px;border-radius:26px;background:#ebe2d5;text-align:left}
#homeView .hm-screenshot-compare #hm-calendar{width:100%;max-width:310px;justify-self:center;min-height:0}
#homeView .hm-calendar-image{border:5px solid var(--hm-shot-frame);border-radius:30px;box-shadow:0 30px 40px -20px #41392d45}
#homeView .hm-screenshot-compare aside>h3{font-size:30px;margin:23px 0 14px}
#homeView .hm-screenshot-compare aside>p{font-size:14px;line-height:1.9;color:var(--hm-muted)}
#homeView .hm-screenshot-compare aside>small{font-size:10px;color:#827867}
#homeView .hm-detail-image{height:235px;border-radius:18px;box-shadow:0 14px 35px #69523312;margin:27px 0 13px}
#homeView .hm-detail-day img{margin-top:-49%}
#homeView .hm-detail-week img{margin-top:-30%}
#homeView .hm-detail-month img{margin-top:-50%}
#homeView .hm-photo-journal{grid-template-columns:1fr 1fr;gap:65px;padding-bottom:65px}
#homeView .hm-photo-journal .hm-caption{color:#bec8b8}
#homeView .hm-journal-photo{background:#f1ebe2;border-radius:20px;padding:24px;transform:rotate(2deg);box-shadow:0 30px 50px #15291b44}
#homeView .hm-export-crop{height:590px;border-radius:14px}
#homeView .hm-export-crop img{margin-top:-30%}
#homeView .hm-format-pills{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
#homeView .hm-format-pills span{font:20px Georgia,serif;border:1px solid #b7c6ad80;border-radius:9px;padding:12px 18px;color:#e9e7da}
#homeView .hm-record-feature{max-width:1144px;margin:auto;padding:0 0 100px;display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:center}
#homeView .hm-record-feature-image{background:#d7d3c6;border-radius:22px;padding:22px;overflow:hidden}
#homeView .hm-record-crop{height:520px;border-radius:14px}
#homeView .hm-record-crop img{margin-top:-100%}
#homeView .hm-record-feature h3{font:34px/1.5 Georgia,SimSun,serif;color:#f4f0e5}
#homeView .hm-record-feature p:not(.hm-kicker){font-size:14px;line-height:1.9;color:#c9d0c2;margin:20px 0}
#homeView .hm-record-feature small{font-size:10px;color:#b1beaa;line-height:1.8}
#homeView #hm-scenario-panel{grid-template-columns:1fr 1.1fr;min-height:430px}
#homeView .hm-scenario-photo{height:335px;border-radius:16px;box-shadow:0 14px 30px #79684f20}
#homeView .hm-scenario-records img{margin-top:-94%}
#homeView .hm-scenario-templates img{margin-top:-118%}
#homeView .hm-scenario-monthly img{margin-top:-32%}
#homeView #hm-image-dialog{width:min(820px,calc(100vw - 24px));max-height:94vh;padding:0;border:1px solid #d7d0c5;border-radius:18px;background:#f6f2eb;color:#37342e;overflow:hidden}
#homeView #hm-image-dialog::backdrop{background:#1c201dd9;backdrop-filter:blur(9px)}
#homeView #hm-image-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 22px;border-bottom:1px solid #ded5c7}
#homeView #hm-image-dialog>header strong{font-size:14px}
#homeView #hm-image-dialog>header button{width:36px;height:36px;border:1px solid #d9cfbe;border-radius:50%;background:transparent;font-size:25px;line-height:1}
#homeView .hm-lightbox-scroll{max-height:calc(94vh - 122px);overflow:auto;padding:18px 25px;overscroll-behavior:contain}
#homeView #hm-lightbox-image{display:block;width:100%;max-width:540px;height:auto;margin:auto;border-radius:8px;filter:var(--hm-shot-tone)}
#homeView #hm-lightbox-note{padding:10px 20px;font-size:10px;color:#796f61;text-align:center}
/* Intent illustrations retain the app structure with quieter presentation. */
#homeView .hm-shot[data-home-art] img{filter:saturate(.65)}
#homeView .hm-hero-photos .hm-shot[data-home-art]{border:1px solid #d4c8b5;border-radius:23px;box-shadow:0 25px 42px -22px #554a3e40}
#homeView .hm-crop-day[data-home-art] img{margin-top:-30%}
#homeView .hm-crop-records[data-home-art] img{margin-top:-43%}
#homeView .hm-crop-month[data-home-art] img{margin-top:-18%}
#homeView .hm-record-crop[data-home-art] img{margin-top:-40%}
@media(max-width:1000px){
  #homeView .hm-hero-photos{height:580px}
  #homeView .hm-hero-photos figure{width:250px}
  #homeView .hm-hero-photos .hm-hero-center{width:280px;left:calc(50% - 140px)}
  #homeView .hm-hero-photos .hm-hero-left{left:20px}
  #homeView .hm-hero-photos .hm-hero-right{right:20px}
  #homeView .hm-photo-bento{grid-template-columns:repeat(3,1fr)}
  #homeView .hm-photo-bento .hm-tile-flow{grid-column:auto}
  #homeView .hm-photo-bento .hm-tile{padding:23px 18px 0;height:360px}
  #homeView .hm-photo-bento .hm-tile h3{font-size:18px}
  #homeView .hm-screenshot-compare{padding:30px;gap:35px}
  #homeView .hm-capture-shot{height:285px}
  #homeView .hm-photo-journal{gap:35px}
  #homeView .hm-export-crop{height:490px}
  #homeView .hm-record-feature{padding:0 28px 80px;gap:35px}
  #homeView .hm-record-crop{height:420px}
}
@media(max-width:640px){
  #homeView .hm-hero{padding:35px 15px 20px}
  #homeView .hm-hero-photos{height:450px;margin-top:35px}
  #homeView .hm-hero-photos figure{width:186px;top:40px}
  #homeView .hm-hero-photos .hm-hero-center{width:218px;left:calc(50% - 109px)}
  #homeView .hm-hero-photos .hm-hero-left{left:calc(50% - 218px);transform:rotate(-12deg)}
  #homeView .hm-hero-photos .hm-hero-right{right:calc(50% - 218px);transform:rotate(12deg)}
  #homeView .hm-hero-photos .hm-shot{border-width:4px;border-radius:26px}
  #homeView .hm-hero-photos figcaption{font-size:8px}
  #homeView .hm-hero-photos .hm-zoom-icon{width:26px;height:26px;right:8px;bottom:8px;font-size:14px}
  #homeView .hm-image-disclosure{padding:0 12px;margin-top:0}
  #homeView .hm-photo-bento{grid-template-columns:1fr}
  #homeView .hm-photo-bento .hm-tile{height:420px;padding:26px 24px 0}
  #homeView .hm-photo-bento .hm-tile h3{font-size:22px}
  #homeView .hm-tile-crop{height:300px}
  #homeView .hm-capture-photos{grid-template-columns:1fr;gap:38px}
  #homeView .hm-capture-shot{height:270px}
  #homeView .hm-photo-flow,#homeView .hm-screenshot-compare,#homeView .hm-photo-journal,#homeView .hm-record-feature,#homeView #hm-scenario-panel{grid-template-columns:1fr;gap:30px}
  #homeView .hm-photo-flow .hm-flow-stage{padding:25px}
  #homeView .hm-photo-flow #hm-flow-panel{max-width:260px}
  #homeView .hm-screenshot-compare{padding:28px 22px}
  #homeView .hm-screenshot-compare #hm-calendar{max-width:260px}
  #homeView .hm-detail-image{height:195px}
  #homeView .hm-export-crop{height:420px}
  #homeView .hm-journal-photo{padding:17px;transform:rotate(1deg)}
  #homeView .hm-record-feature{padding:0 22px 65px}
  #homeView .hm-record-crop{height:345px}
  #homeView .hm-record-feature h3{font-size:29px}
  #homeView .hm-record-feature-image{padding:16px}
  #homeView .hm-scenario-photo{height:260px}
  #homeView .hm-lightbox-scroll{padding:12px}
}
