/* HOME_MOTION — the motion homepage around the upload card: a hero stage, the story sections and Aarav, the
   illustrated companion. Every rule is scoped to .hm / .hm-* / #aarav, so the app and editor CSS are untouched;
   body.hm-off (set by home_motion.js while the editor or a deep-link hand-off is showing) switches it all off. */
.hm, .hm-hero, #aarav {
  --hm-bg: #FAF6EF; --hm-surface: #FFFFFF; --hm-ink: #1F1B16; --hm-body: #3D362E; --hm-muted: #7A6F60;
  --hm-bronze: #8B7355; --hm-bronze-ink: #6E5A41; --hm-rule: #E7DECE; --hm-chip: #F3ECE1; --hm-blob: #E9DECD;
  --hm-green: #2D6A4F; --hm-bad: #A8443A; --hm-panel: #16130F; --hm-panel-fg: #F3EBDD; --hm-panel-muted: #B3A795;
  --hm-panel-rule: #2E2821; --hm-scan: #4FBF8A; --hm-shadow: rgba(60,45,25,.18);
  --hm-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --hm-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hm-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
body.hm-off .hm, body.hm-off .hm-stage, body.hm-off #aarav, body.hm-off #hm-progress { display: none !important; }

/* ---------- hero: the real upload card on the left, the design stage on the right ---------- */
.hm-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hm-hero .hm-left { min-width: 0; }
.hm-hero .hm-left .hero { text-align: left; }
.hm-hero .hm-left .hero .brand-lockup { justify-content: flex-start; }
.hm-hero .hm-left .hero .lede { margin-left: 0; }
.hm-hero .hm-left .card { margin: 0; max-width: none; }
body.hm-off .hm-hero { display: block; }
body.hm-off .hm-hero .hm-left .hero { text-align: center; }
body.hm-off .hm-hero .hm-left .hero .brand-lockup { justify-content: center; }
body.hm-off .hm-hero .hm-left .hero .lede { margin-left: auto; }
body.hm-off .hm-hero .hm-left .card { margin: 0 auto; max-width: 720px; }
@media (max-width: 980px) {
  .hm-hero { display: block; }
  .hm-hero .hm-left .hero { text-align: center; }
  .hm-hero .hm-left .hero .brand-lockup { justify-content: center; }
  .hm-hero .hm-left .hero .lede { margin-left: auto; }
  .hm-hero .hm-left .card { margin: 0 auto; max-width: 720px; }
  .hm-hero > .hm-stage { display: none; }
}

.hm-stage { position: relative; height: clamp(440px, 46vw, 600px); min-width: 0; perspective: 1600px; }
.hm-pool { position: absolute; inset: -8% -14% -6% -10%; width: 124%; height: 114%; pointer-events: none; }
.hm-pool .p { fill: var(--hm-blob); }
.hm-stack { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.hm-sheet { position: absolute; width: min(360px, 62%); aspect-ratio: 900 / 1274; left: 50%; top: 50%; border-radius: 6px; overflow: hidden;
  background: #fff; box-shadow: 0 40px 80px var(--hm-shadow), 0 3px 10px var(--hm-shadow); }
.hm-sheet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; max-width: none; }
.hm-sheet.l { transform: translate(-50%, -50%) translate(-34%, 6%) rotate(-9deg) scale(.86); }
.hm-sheet.r { transform: translate(-50%, -50%) translate(34%, 3%) rotate(8deg) scale(.88); }
.hm-sheet.f { transform: translate(-50%, -50%) translateZ(60px); }
.hm-sheet.f .top { clip-path: inset(0 0 100% 0); }
.hm-sheet.f .roller { position: absolute; left: 0; right: 0; height: 3px; background: var(--hm-bronze); top: 0; opacity: 0;
  box-shadow: 0 0 18px 2px rgba(139,115,85,.7); }
.hm-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 14px; z-index: 2;
  background: var(--hm-surface); color: var(--hm-ink); font: 600 13.5px/1.2 var(--hm-sans); white-space: nowrap;
  box-shadow: 0 18px 40px var(--hm-shadow); border: 1px solid var(--hm-rule); transform: translateZ(120px); }
.hm-chip small { display: block; font: 500 11.5px var(--hm-sans); color: var(--hm-muted); margin-top: 2px; }
.hm-chip .sw { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 3px solid var(--hm-surface); box-shadow: 0 0 0 1px var(--hm-rule); }
.hm-chip .ok { width: 24px; height: 24px; border-radius: 50%; background: var(--hm-green); display: grid; place-items: center; flex: none; }
.hm-chip.theme { left: 0; top: 12%; animation: hm-float 6s ease-in-out infinite; }
.hm-chip.ats { right: -2%; top: 44%; animation: hm-float 7s ease-in-out -2s infinite; }
.hm-chip.view { right: 0; bottom: 6%; animation: hm-float 6.5s ease-in-out -4s infinite; }
@keyframes hm-float { 0%, 100% { translate: 0 0 } 50% { translate: 0 -10px } }
html.hm-waking { overflow-x: hidden; }   /* only while the opening plays: no sideways scrollbar flashes */
/* the hero stage's overhang reaches at most to the window's edge, so it never widens the page (.wrap pads 24px) */
.hm-hero > .hm-stage { --hm-room: calc(max(24px, (100vw - 1180px) / 2 + 24px) - 18px); }
.hm-hero > .hm-stage .hm-pool { width: auto; right: max(-14%, -1 * var(--hm-room)); }
@media (max-width: 1300px) { .hm-hero .hm-chip.ats { right: 4%; } .hm-hero .hm-chip.view { right: 3%; } }
@media (max-width: 600px) {   /* phones: the chips stay inside the screen */
  .hm-chip { padding: 8px 11px; font-size: 12px; gap: 8px; }
  .hm-chip small { font-size: 10.5px; }
  .hm-chip.theme { left: 3%; } .hm-chip.ats { right: 3%; top: 46%; } .hm-chip.view { right: 3%; }
}
.hm-drop { position: absolute; left: 50%; top: 0; width: 40px; height: 54px; margin-left: -20px; opacity: 0; z-index: 5; fill: var(--hm-ink); }
.hm-splash { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 2px solid var(--hm-bronze); opacity: 0; pointer-events: none; }

/* ---------- shared story parts ---------- */
.hm { color: var(--hm-body); font: 400 17px/1.6 var(--hm-sans); margin-top: clamp(40px, 6vw, 80px); text-align: left; }
.hm h2, .hm h3 { font-family: var(--hm-display); color: var(--hm-ink); font-weight: 600; text-wrap: balance; letter-spacing: -.012em; margin: 0; }
.hm h2 { font-size: clamp(38px, 5.2vw, 72px); line-height: .98; }
.hm h2 i { color: var(--hm-bronze); }
.hm p { margin: 0; }
.hm img { max-width: 100%; display: block; }
.hm-eyebrow { font: 600 12.5px/1 var(--hm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-bronze-ink);
  display: inline-flex; align-items: center; gap: 10px; }
.hm-lede { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.6; color: var(--hm-body); max-width: 34em; }
.hm-fine { font-size: 14px; color: var(--hm-muted); }
.hm-feat { display: grid; gap: 11px; padding: 0; margin: 0; list-style: none; }
.hm-feat li { display: flex; gap: 12px; align-items: flex-start; color: var(--hm-body); }
.hm-feat svg { flex: none; margin-top: 4px; color: var(--hm-green); }
.hm-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 16px/1 var(--hm-sans); text-decoration: none; transition: background .25s, color .25s, box-shadow .25s; }
.hm-btn.primary { background: var(--hm-ink); color: var(--hm-bg); box-shadow: 0 14px 34px var(--hm-shadow); }
.hm-btn.primary:hover { background: var(--hm-bronze-ink); }
.hm-btn.ghost { background: transparent; color: var(--hm-ink); box-shadow: inset 0 0 0 1.5px var(--hm-rule); }
.hm-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--hm-bronze); }
.hm-btn svg { transition: transform .3s; }
.hm-btn:hover svg { transform: translateX(4px); }
.hm-btn:focus-visible, .hm a:focus-visible { outline: 2px solid var(--hm-bronze); outline-offset: 3px; }
.hm-pulse { animation: hm-pulse 1.4s ease-out 2; }
@keyframes hm-pulse { 0% { box-shadow: 0 0 0 0 rgba(139,115,85,.55) } 100% { box-shadow: 0 0 0 22px rgba(139,115,85,0) } }
#hm-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--hm-bronze, #8B7355); transform-origin: 0 50%;
  transform: scaleX(0); z-index: 35; pointer-events: none; }
.hm-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.hm-split > div { min-width: 0; }
.hm-copy { display: grid; gap: 20px; }
.hm-sec { padding-block: clamp(48px, 8vw, 110px); }
@media (max-width: 860px) { .hm-split { grid-template-columns: 1fr; } }

/* the 1:40 am opener, only on phones (desktop has the stage in the hero) */
.hm-open { display: grid; gap: 18px; text-align: center; justify-items: center; padding-top: 8px; overflow-x: clip; }
.hm-open .hm-stage { width: 100%; height: min(520px, 124vw); }

/* theme ticker */
.hm-marquee { border-block: 1px solid var(--hm-rule); padding-block: 20px; overflow: hidden; display: grid; gap: 8px; }
.hm-track { display: flex; width: max-content; animation: hm-marq 60s linear infinite; }
.hm-track.rev { animation-direction: reverse; animation-duration: 72s; }
.hm-track span { font: italic 500 clamp(28px, 3.8vw, 50px)/1.15 var(--hm-display); color: var(--hm-ink); padding-inline: 20px; white-space: nowrap; }
.hm-track.rev span { font: 500 clamp(13px, 1.3vw, 16px)/1.6 var(--hm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-muted); }
.hm-track span::after { content: '\2726'; color: var(--hm-bronze); font-style: normal; font-size: .5em; vertical-align: middle; margin-left: 40px; }
@keyframes hm-marq { to { transform: translateX(-50%) } }

/* AI editor demo */
.hm-editor { position: relative; background: var(--hm-surface); border: 1px solid var(--hm-rule); border-radius: 24px; padding: 0 0 300px;
  box-shadow: 0 50px 110px var(--hm-shadow); overflow: hidden; }
.hm-ed-top { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--hm-rule); font: 600 13px var(--hm-sans); color: var(--hm-muted); }
.hm-ed-top .dots { display: flex; gap: 6px; } .hm-ed-top .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--hm-rule); }
.hm-ed-saved { margin-left: auto; color: var(--hm-green); }
.hm-ed-doc { padding: 24px clamp(18px, 3vw, 32px); font-size: 14.5px; line-height: 1.55; color: var(--hm-body); }
.hm-ed-role { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.hm-ed-role b { font: 700 21px/1.2 var(--hm-display); color: var(--hm-ink); }
.hm-ed-role span { font: 600 11.5px var(--hm-sans); letter-spacing: .05em; color: var(--hm-bronze-ink); white-space: nowrap; }
.hm-ed-org { color: var(--hm-muted); font-size: 13.5px; margin: 2px 0 12px; }
.hm-ed-bul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 9px; list-style: disc; }
.hm-ed-bul li { position: relative; }
.hm-ed-bul li::marker { color: var(--hm-bronze); }
.hm-hl { position: absolute; inset: -3px -6px; border-radius: 6px; background: rgba(139,115,85,.22); transform-origin: 0 50%; transform: scaleX(0); z-index: 0; }
.hm-ed-bul .tx { position: relative; z-index: 1; }
.hm-ed-bul .tx.inked { background: linear-gradient(var(--hm-bronze), var(--hm-bronze)) 0 100% / var(--u, 0%) 2px no-repeat; }
.hm-change { position: absolute; left: clamp(14px, 2.4vw, 24px); right: clamp(14px, 2.4vw, 24px); bottom: 82px; background: var(--hm-bg);
  border: 1px solid var(--hm-rule); border-radius: 18px; padding: 15px 18px; box-shadow: 0 24px 50px var(--hm-shadow); display: grid; gap: 8px; font-size: 14px; }
.hm-ch-h { display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--hm-sans); color: var(--hm-ink); }
.hm-ch-h small { margin-left: auto; font-weight: 500; color: var(--hm-muted); font-size: 12px; }
.hm-spark { color: var(--hm-bronze); }
.hm-change .old { color: var(--hm-bad); text-decoration: line-through; opacity: .85; }
.hm-change .new { color: var(--hm-green); font-weight: 500; }
.hm-ch-act { display: flex; gap: 8px; margin-top: 4px; }
.hm-ch-act span { padding: 8px 16px; border-radius: 999px; font: 600 13px var(--hm-sans); }
.hm-ch-act .apply { background: var(--hm-ink); color: var(--hm-bg); }
.hm-ch-act .skip { box-shadow: inset 0 0 0 1px var(--hm-rule); color: var(--hm-body); }
.hm-ask { position: absolute; left: clamp(14px, 2.4vw, 24px); right: clamp(14px, 2.4vw, 24px); bottom: 18px; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 12px 18px; border-radius: 16px; background: var(--hm-chip); border: 1px solid var(--hm-rule); font: 500 14.5px var(--hm-sans); color: var(--hm-ink); overflow: hidden; }
.hm-ask .ask-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hm-ask .send { margin-left: auto; width: 32px; height: 32px; border-radius: 10px; background: var(--hm-ink); color: var(--hm-bg); display: grid; place-items: center; flex: none; font-weight: 700; }
.hm-ask.think { background: linear-gradient(90deg, var(--hm-chip) 0%, #E2D3BD 50%, var(--hm-chip) 100%) 0 0 / 200% 100%; animation: hm-shimmer 1s linear infinite; }
@keyframes hm-shimmer { to { background-position: -200% 0 } }
.hm-ed-cursor { position: absolute; width: 26px; height: 26px; left: 70%; top: 60%; opacity: 0; z-index: 5; pointer-events: none; }
@media (max-width: 520px) { .hm-editor { padding-bottom: 360px; } }

/* same facts, new look (pinned restyle) */
.hm-morph-pin { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: center; min-height: 100vh; padding-block: clamp(40px, 6vw, 80px); }
.hm-morph-pin > div { min-width: 0; }
.hm-swatches { display: flex; flex-wrap: wrap; gap: 10px; max-width: 420px; }
.hm-swatches i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--hm-bg); box-shadow: 0 0 0 1px var(--hm-rule); transition: transform .3s, box-shadow .3s; }
.hm-swatches i.on { transform: scale(1.35); box-shadow: 0 0 0 2px var(--hm-ink); }
.hm-now { display: flex; align-items: baseline; gap: 14px; font: 600 15px var(--hm-sans); color: var(--hm-ink); }
.hm-now .count { font: 500 13px var(--hm-mono); color: var(--hm-muted); font-variant-numeric: tabular-nums; }
.hm-now .lay { color: var(--hm-muted); font-weight: 500; }
.hm-hint { font: 500 13px var(--hm-mono); color: var(--hm-muted); display: flex; align-items: center; gap: 10px; }
.hm-hint i { width: 30px; height: 1.5px; background: var(--hm-bronze); display: block; animation: hm-hint 1.8s ease-in-out infinite; transform-origin: 0 50%; }
@keyframes hm-hint { 0% { transform: scaleX(.2) } 50% { transform: scaleX(1) } 100% { transform: scaleX(.2) } }
.hm-morph-stage { display: grid; place-items: center; perspective: 1800px; }
.hm-page { position: relative; width: min(500px, 100%); aspect-ratio: 900 / 1274; border-radius: 6px; overflow: hidden; background: #fff;
  box-shadow: 0 60px 120px var(--hm-shadow), 0 4px 14px var(--hm-shadow); will-change: transform; }
.hm-page img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; max-width: none; }
.hm-page img:not(:first-child) { clip-path: inset(100% 0 0 0); }
.hm-page .roller { position: absolute; left: -2%; right: -2%; height: 4px; background: var(--hm-bronze); top: 100%; opacity: 0; box-shadow: 0 0 24px 3px rgba(139,115,85,.65); }
@media (max-width: 860px) {
  .hm-morph-pin { grid-template-columns: 1fr; align-content: center; gap: 18px; padding-block: 24px; }
  .hm-morph-pin .hm-lede, .hm-morph-pin .hm-hint { display: none; }
  .hm-morph-pin h2 { font-size: clamp(36px, 10vw, 54px); }
  .hm-page { width: min(300px, 62vw, 34vh); }
}

/* design wall */
.hm-wall { position: relative; height: clamp(600px, 66vw, 800px); overflow: hidden; perspective: 1600px; }
.hm-plane { position: absolute; left: 50%; top: 50%; width: 1500px; display: flex; gap: 22px; justify-content: center;
  transform: translate(-50%, -50%) rotateX(24deg) rotateZ(-9deg) scale(1.08); transform-style: preserve-3d; }
.hm-col { width: 250px; flex: none; display: flex; flex-direction: column; gap: 22px; animation: hm-col 46s linear infinite; }
.hm-col:nth-child(2n) { animation-direction: reverse; animation-duration: 54s; }
.hm-col:nth-child(3n) { animation-duration: 40s; }
.hm-col img { width: 250px; aspect-ratio: 900 / 1274; object-fit: cover; object-position: top; border-radius: 6px; background: #fff; box-shadow: 0 22px 44px var(--hm-shadow); max-width: none; }
@keyframes hm-col { to { transform: translateY(-50%) } }
.hm-wall::before, .hm-wall::after { content: ''; position: absolute; left: 0; right: 0; height: 22%; z-index: 2; pointer-events: none; }
.hm-wall::before { top: 0; background: linear-gradient(var(--hm-bg), rgba(250,246,239,0)); }
.hm-wall::after { bottom: 0; background: linear-gradient(rgba(250,246,239,0), var(--hm-bg)); }
.hm-glass { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(540px, calc(100% - 32px));
  padding: clamp(26px, 4vw, 46px); border-radius: 32px; text-align: center; display: grid; gap: 10px;
  background: rgba(250,246,239,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--hm-rule); box-shadow: 0 40px 100px var(--hm-shadow); }
.hm-big { font: 700 clamp(104px, 15vw, 200px)/.82 var(--hm-display); color: var(--hm-ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.03em; }
.hm-math { font: 600 clamp(22px, 2.4vw, 30px)/1.2 var(--hm-display) !important; color: var(--hm-body) !important; }
.hm-glass p { font-size: 15.5px; color: var(--hm-muted); }
.hm-glass a { color: var(--hm-bronze-ink); font-weight: 600; }

/* ATS panel */
.hm-panel { background: var(--hm-panel); color: var(--hm-panel-fg); border-radius: clamp(22px, 3vw, 36px); padding: clamp(28px, 5vw, 70px); overflow: hidden; }
.hm-panel h2 { color: var(--hm-panel-fg); }
.hm-panel .hm-eyebrow { color: var(--hm-scan); }
.hm-panel .hm-lede { color: var(--hm-panel-muted); }
.hm-scanner { position: relative; border-radius: 6px; overflow: hidden; background: #fff; aspect-ratio: 900 / 1274; max-width: 420px; width: 100%; justify-self: center;
  box-shadow: 0 40px 90px rgba(0,0,0,.6); }
.hm-scanner img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hm-beam { position: absolute; left: -10%; right: -10%; height: 26%; top: -26%;
  background: linear-gradient(180deg, rgba(79,191,138,0), rgba(79,191,138,.26) 75%, var(--hm-scan) 98%, rgba(79,191,138,0)); animation: hm-beam 3.6s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes hm-beam { 0% { top: -26% } 100% { top: 100% } }
.hm-term { background: rgba(243,235,221,.05); border: 1px solid var(--hm-panel-rule); border-radius: 16px; padding: 16px 18px;
  font: 500 13.5px/1.75 var(--hm-mono); color: var(--hm-panel-fg); overflow-x: auto; min-height: 210px; }
.hm-term .row { display: flex; justify-content: space-between; gap: 16px; white-space: pre; }
.hm-term .k { color: var(--hm-panel-muted); }
.hm-term .ok { color: var(--hm-scan); }
.hm-term .bad { color: #E07A6E; text-decoration: line-through; }
.hm-term .note { color: #E07A6E; }
.hm-caret { display: inline-block; width: 8px; height: 1.1em; background: var(--hm-scan); vertical-align: -3px; animation: hm-blink 1s steps(1) infinite; }
@keyframes hm-blink { 50% { opacity: 0 } }
@media (max-width: 860px) { .hm-scanner { max-width: 300px; } }

/* InkScore */
.hm-score-card { background: var(--hm-surface); border: 1px solid var(--hm-rule); border-radius: 28px; padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 40px 90px var(--hm-shadow); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: center; }
.hm-gauge { position: relative; width: 164px; height: 164px; }
.hm-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hm-gauge circle { fill: none; stroke-width: 14; }
.hm-gauge .trk { stroke: var(--hm-chip); } .hm-gauge .val { stroke: var(--hm-green); stroke-linecap: round; }
.hm-gnum { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.hm-gnum b { font: 700 58px/1 var(--hm-display); color: var(--hm-ink); font-variant-numeric: tabular-nums; }
.hm-gnum span { font: 600 10.5px var(--hm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-muted); }
.hm-jd { display: grid; gap: 4px; }
.hm-jd span { font: 600 11px var(--hm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-muted); }
.hm-jd b { font: 600 22px/1.2 var(--hm-display); color: var(--hm-ink); }
.hm-jd em { font: 500 13px var(--hm-mono); font-style: normal; color: var(--hm-bronze-ink); }
.hm-pillars { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.hm-pl { display: flex; align-items: baseline; gap: 10px; font: 600 14.5px var(--hm-sans); color: var(--hm-ink); }
.hm-pl small { font: 500 12px var(--hm-mono); color: var(--hm-muted); }
.hm-pl b { margin-left: auto; font-variant-numeric: tabular-nums; }
.hm-pillars i { display: block; height: 8px; border-radius: 99px; background: var(--hm-chip); margin-top: 6px; overflow: hidden; }
.hm-pillars s { display: block; height: 100%; border-radius: 99px; background: var(--hm-bronze); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.hm-checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-checks span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--hm-chip); font: 500 13px var(--hm-sans); color: var(--hm-body); }
.hm-checks svg { color: var(--hm-green); }
.hm-score-card .hm-fine { grid-column: 1 / -1; }
@media (max-width: 860px) { .hm-score-card { grid-template-columns: 1fr; justify-items: start; } .hm-score .hm-copy { order: -1; } }

/* share link */
.hm-phone-wrap { position: relative; display: grid; place-items: center; min-height: 620px; }
.hm-phone { position: relative; width: 310px; height: 620px; border-radius: 46px; background: #0E0D0B; padding: 12px; box-shadow: 0 60px 120px var(--hm-shadow); }
.hm-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #ECE5D9; display: flex; flex-direction: column; }
.hm-screen .bar { height: 82px; background: #F6F1E8; display: flex; align-items: flex-end; gap: 12px; padding: 0 18px 12px; border-bottom: 1px solid #DDD3C3; font: 600 15px var(--hm-sans); color: #1F1B16; }
.hm-screen .av { width: 34px; height: 34px; border-radius: 50%; background: #C9B79C; display: grid; place-items: center; font: 700 13px var(--hm-sans); color: #fff; }
.hm-screen .bar small { display: block; font: 500 11.5px var(--hm-sans); color: #7A6F60; }
.hm-msgs { flex: 1; padding: 18px 14px; display: flex; flex-direction: column; justify-content: flex-end; }
.hm-bubble { align-self: flex-end; width: 84%; background: #DCEFD9; border-radius: 18px 18px 4px 18px; padding: 6px; }
.hm-lcard { background: #fff; border-radius: 13px; overflow: hidden; }
.hm-lcard .shot { height: 128px; overflow: hidden; border-bottom: 1px solid #EEE6DA; }
.hm-lcard .tx { padding: 9px 11px 10px; font: 600 13px/1.3 var(--hm-sans); color: #1F1B16; }
.hm-lcard .tx span { display: block; font: 500 11.5px var(--hm-sans); color: #7A6F60; margin-top: 3px; }
.hm-bubble .meta { font: 500 11px var(--hm-sans); color: #5E7A5A; text-align: right; padding: 5px 6px 1px; }
.hm-toast { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 3; display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  border-radius: 18px; background: rgba(31,27,22,.94); color: #F3EBDD; font: 600 13.5px/1.3 var(--hm-sans); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.hm-toast small { display: block; font: 500 11.5px var(--hm-sans); color: #B3A795; }
.hm-toast .ic { width: 36px; height: 36px; border-radius: 11px; background: #8B7355; display: grid; place-items: center; flex: none; }
.hm-dash { position: absolute; right: max(-4%, -30px); bottom: 8%; width: 226px; z-index: 4; background: var(--hm-surface); border: 1px solid var(--hm-rule);
  border-radius: 20px; padding: 17px; box-shadow: 0 30px 70px var(--hm-shadow); color: var(--hm-body); }
.hm-dash .lbl { font: 600 11px var(--hm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-muted); }
.hm-dash .vn { display: flex; align-items: baseline; gap: 8px; font: 700 62px/1 var(--hm-display); color: var(--hm-ink); font-variant-numeric: tabular-nums; }
.hm-dash .vn b { display: inline-block; transform-origin: 0 80%; }
.hm-dash .vn span { font: 600 18px var(--hm-display); color: var(--hm-body); }
.hm-dash .bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; margin: 8px 0 12px; }
.hm-dash .bars i { flex: 1; background: var(--hm-bronze); border-radius: 4px 4px 0 0; opacity: .85; transform-origin: 50% 100%; }
.hm-dash .bars i:last-child { background: var(--hm-ink); }
.hm-dash .r { display: flex; justify-content: space-between; font: 500 13px var(--hm-sans); border-top: 1px solid var(--hm-rule); padding-top: 8px; margin-top: 8px; }
.hm-dash .r b { color: var(--hm-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .hm-dash { right: 0; } }   /* its overhang would widen the page */
@media (max-width: 860px) { .hm-dash { right: 0; bottom: 2%; } }
@media (max-width: 420px) { .hm-phone { transform: scale(.88); } .hm-phone-wrap { min-height: 560px; } .hm-dash { width: 196px; } }

/* the editor toolkit */
.hm-kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin-top: clamp(26px, 4vw, 44px); }
.hm-tile { position: relative; display: grid; grid-template-rows: 166px auto auto; gap: 10px; padding: 20px 22px 24px; border-radius: 24px;
  background: var(--hm-surface); border: 1px solid var(--hm-rule); overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.hm-tile:hover { transform: translateY(-6px); box-shadow: 0 30px 60px var(--hm-shadow); }
.hm-tile h3 { font-size: clamp(25px, 2.2vw, 31px); line-height: 1.05; }
.hm-tile p { color: var(--hm-muted); font-size: 15.5px; }
.hm-viz { position: relative; border-radius: 16px; background: var(--hm-chip); overflow: hidden; }
@media (max-width: 980px) { .hm-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .hm-kit { grid-template-columns: 1fr; } }
.hm-vlist { position: absolute; left: 20px; right: 20px; top: 0; display: grid; gap: 10px; animation: hm-vscroll 6s cubic-bezier(.6,0,.3,1) infinite; }
.hm-vrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--hm-surface); font: 500 13px var(--hm-sans); color: var(--hm-body); }
.hm-vrow i { width: 10px; height: 10px; border-radius: 50%; background: var(--hm-bronze); flex: none; }
.hm-vrow small { margin-left: auto; color: var(--hm-muted); font: 500 12px var(--hm-mono); }
.hm-vrow.cur { box-shadow: 0 0 0 2px var(--hm-ink); } .hm-vrow.cur i { background: var(--hm-green); }
@keyframes hm-vscroll { 0%, 20% { transform: translateY(14px) } 45%, 70% { transform: translateY(-60px) } 95%, 100% { transform: translateY(14px) } }
.hm-ph { position: absolute; left: 50%; top: 50%; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px var(--hm-surface), 0 0 0 5px var(--hm-bronze); }
.hm-ph b { position: absolute; inset: -30%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #C9A97F, #8B7355 70%);
  color: #fff; font: 700 44px var(--hm-display); animation: hm-phzoom 5s ease-in-out infinite; }
@keyframes hm-phzoom { 0%, 100% { transform: scale(1) translate(0,0) } 40% { transform: scale(1.25) translate(6px,-5px) } 70% { transform: scale(1.1) translate(-6px,4px) } }
.hm-crop { position: absolute; left: 50%; top: 50%; width: 148px; height: 148px; margin: -74px 0 0 -74px; border: 1.5px dashed var(--hm-muted); border-radius: 6px; }
.hm-crop::before, .hm-crop::after { content: ''; position: absolute; width: 14px; height: 14px; border: 3px solid var(--hm-ink); }
.hm-crop::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; } .hm-crop::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
.hm-ro { position: absolute; left: 20px; right: 20px; top: 14px; height: 140px; }
.hm-ro span { position: absolute; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 10px;
  background: var(--hm-surface); font: 600 13px var(--hm-sans); color: var(--hm-ink); box-shadow: 0 2px 0 var(--hm-rule); }
.hm-ro span::before { content: '\22EE\22EE'; color: var(--hm-muted); font-size: 11px; letter-spacing: -2px; }
.hm-ro span:nth-child(1) { top: 0; animation: hm-roA 5s ease-in-out infinite; }
.hm-ro span:nth-child(2) { top: 36px; } .hm-ro span:nth-child(3) { top: 72px; animation: hm-roB 5s ease-in-out infinite; } .hm-ro span:nth-child(4) { top: 108px; }
@keyframes hm-roA { 0%, 25% { transform: translateY(0) } 45%, 75% { transform: translateY(72px); box-shadow: 0 12px 24px var(--hm-shadow) } 95%, 100% { transform: translateY(0) } }
@keyframes hm-roB { 0%, 25% { transform: translateY(0) } 45%, 75% { transform: translateY(-72px) } 95%, 100% { transform: translateY(0) } }
.hm-acc { position: absolute; left: 50%; top: 14px; width: 118px; height: 150px; margin-left: -59px; background: #fff; border-radius: 6px; padding: 12px;
  box-shadow: 0 12px 26px var(--hm-shadow); display: grid; gap: 6px; align-content: start; }
.hm-acc i { display: block; height: 5px; border-radius: 3px; background: #DDD5C8; }
.hm-acc i.h { height: 7px; width: 60%; animation: hm-accC 6s steps(1) infinite; }
.hm-acc i.n { height: 9px; width: 75%; margin: 0 auto 4px; background: #2a2620; }
@keyframes hm-accC { 0% { background: #8B7355 } 20% { background: #2D6A4F } 40% { background: #7A2E3A } 60% { background: #14507A } 80% { background: #B4593A } }
.hm-acc-dots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; padding: 9px; }
.hm-acc-dots b { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--hm-surface); }
.hm-lt { position: absolute; left: 50%; top: 14px; width: 128px; height: 168px; margin-left: -64px; background: #fff; border-radius: 6px; padding: 14px 13px;
  box-shadow: 0 12px 26px var(--hm-shadow); display: grid; gap: 7px; align-content: start; }
.hm-lt i { display: block; height: 5px; border-radius: 3px; background: #DDD5C8; transform-origin: 0 50%; animation: hm-ltW 5s ease-out infinite; }
.hm-lt i:nth-child(1) { width: 45%; background: #2a2620; } .hm-lt i:nth-child(2) { animation-delay: .25s; } .hm-lt i:nth-child(3) { animation-delay: .5s; width: 90%; }
.hm-lt i:nth-child(4) { animation-delay: .75s; } .hm-lt i:nth-child(5) { animation-delay: 1s; width: 80%; } .hm-lt i:nth-child(6) { animation-delay: 1.25s; } .hm-lt i:nth-child(7) { animation-delay: 1.5s; width: 55%; }
@keyframes hm-ltW { 0% { transform: scaleX(0) } 20%, 85% { transform: scaleX(1) } 100% { transform: scaleX(0) } }
.hm-lt-pdf { position: absolute; right: 16px; bottom: 14px; padding: 6px 11px; border-radius: 999px; background: var(--hm-ink); color: var(--hm-bg); font: 600 12px var(--hm-sans); }
.hm-pe { position: absolute; left: 50%; top: 12px; width: 94px; height: 186px; margin-left: -47px; border-radius: 20px; background: #0E0D0B; padding: 6px; }
.hm-pe .sc { position: relative; height: 100%; border-radius: 15px; background: #fff; overflow: hidden; }
.hm-pe .sc i { display: block; height: 5px; margin: 9px 10px 0; border-radius: 3px; background: #DDD5C8; }
.hm-pe .up { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: #F3ECE1; border-radius: 14px 14px 0 0; padding: 10px; display: grid; gap: 7px; align-content: start;
  animation: hm-sheetup 4.5s cubic-bezier(.2,.8,.2,1) infinite; }
.hm-pe .up b { display: block; height: 16px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #E7DECE; }
.hm-pe .up b:last-child { background: #1F1B16; width: 60%; }
@keyframes hm-sheetup { 0%, 10% { transform: translateY(100%) } 30%, 80% { transform: translateY(0) } 100% { transform: translateY(100%) } }

/* three steps */
.hm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); list-style: none; padding: 0; margin: clamp(26px, 4vw, 44px) 0 0; }
.hm-step { display: grid; gap: 13px; align-content: start; padding: clamp(22px, 2.6vw, 30px); border-radius: 24px; background: var(--hm-surface); border: 1px solid var(--hm-rule);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.hm-step:hover { transform: translateY(-6px); box-shadow: 0 30px 60px var(--hm-shadow); }
.hm-step .n { font: 500 13px var(--hm-mono); color: var(--hm-bronze-ink); }
.hm-step h3 { font-size: clamp(27px, 2.5vw, 34px); line-height: 1.05; }
.hm-step p { color: var(--hm-muted); font-size: 16px; }
.hm-step .ico { width: 62px; height: 62px; border-radius: 18px; background: var(--hm-chip); display: grid; place-items: center; color: var(--hm-ink); }
@media (max-width: 860px) { .hm-steps { grid-template-columns: 1fr; } }

/* closing call to action */
.hm-cta { position: relative; overflow: hidden; border-radius: clamp(22px, 3vw, 36px); background: var(--hm-panel); color: var(--hm-panel-fg);
  padding: clamp(48px, 8vw, 110px) clamp(24px, 5vw, 70px); display: grid; gap: 26px; justify-items: center; text-align: center; margin-top: clamp(40px, 6vw, 80px); }
.hm-cta h2 { color: var(--hm-panel-fg); font-size: clamp(42px, 6.2vw, 92px); max-width: 12em; position: relative; z-index: 2; }
.hm-cta .hm-btn.primary { background: var(--hm-panel-fg); color: var(--hm-panel); position: relative; z-index: 2; }
.hm-cta .hm-btn.primary:hover { background: #C6A67D; }
.hm-cta .hm-fine { color: var(--hm-panel-muted); position: relative; z-index: 2; }
.hm-cta svg.ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hm-cta svg.ink circle { fill: rgba(139,115,85,.3); }

/* Aarav: one fixed layer above the page that never catches the pointer */
#aarav { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }   /* under every app overlay (40+) */
#aarav .fig { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; will-change: transform; }
#aarav .fig img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; max-width: none; }
#aarav .fig img.on { opacity: 1; }
#aarav .fig::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -3%; height: 7%; z-index: -1; background: radial-gradient(closest-side, rgba(40,30,20,.3), transparent); }
#aarav .fig.air::after { opacity: 0; }
#aarav .roller { position: absolute; left: 0; top: 0; height: 22px; border-radius: 11px; opacity: 0; transition: opacity .3s;
  background: linear-gradient(180deg, #F6EFE4 0%, #E3D6C2 38%, #BFA98A 70%, #8B7355 100%); box-shadow: 0 8px 18px rgba(60,45,25,.32), inset 0 1px 0 rgba(255,255,255,.75); }
#aarav .roller::before, #aarav .roller::after { content: ''; position: absolute; top: -3px; width: 12px; height: 28px; border-radius: 5px; background: #2A2520; }
#aarav .roller::before { left: -6px; } #aarav .roller::after { right: -6px; }
.aarav-on .hm-page .roller { display: none; }

/* Aarav peeking over the upload card: a clipped stage whose bottom edge is the card's top edge (--cb lets his fingers over it) */
.hm-peek { position: absolute; z-index: 3; pointer-events: none; overflow: hidden; clip-path: inset(0 0 var(--cb, 0px) 0); transition: clip-path .14s ease-out; }
.hm-pk-fig { position: absolute; bottom: 0; will-change: transform; }
.hm-pk-pose { position: absolute; left: 0; bottom: 0; width: 100%; visibility: hidden; }
.hm-pk-pose.on { visibility: visible; }
.hm-pk-pose img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
.hm-pk-pose img.lid { height: auto; opacity: 0; }
.hm-pk-pose img.lid.on { opacity: 1; }
.hm-pk-hit { position: absolute; left: 14%; right: 10%; top: 0; height: 80%; pointer-events: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hm-peek.up .hm-pk-hit { pointer-events: auto; }
.hm-pk-ink { position: absolute; width: 7px; height: 7px; border-radius: 50% 50% 50% 0; background: #2A2520; pointer-events: none; z-index: 4; }
.hm-pk-ink.b { background: #8B7355; }
.hm-pk-ripple { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(139,115,85,.75); box-shadow: inset 0 0 14px rgba(139,115,85,.25); pointer-events: none; z-index: 2; }
.hm-peek-say { position: absolute; right: 108px; bottom: calc(100% + 18px); width: max-content; max-width: calc(100% - 120px); padding: 9px 13px; border-radius: 14px; z-index: 4;
  background: #1F1B16; color: #F3EBDD; font: 600 13px/1.3 'Inter', system-ui, sans-serif; text-align: left; box-shadow: 0 12px 26px rgba(31,27,22,.25);
  opacity: 0; transition: opacity .25s; pointer-events: none; transform-origin: 100% 60%; animation: hm-pk-float 3.2s ease-in-out infinite; }
.hm-peek-say::after { content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: #1F1B16; transform: rotate(45deg); border-radius: 2px; }
.hm-peek-say.on { opacity: 1; }
.hm-peek-say span { opacity: 0; }
.hm-peek-say span.in { opacity: 1; transition: opacity .12s; }
@keyframes hm-pk-float { 50% { translate: 0 -3px; } }
.hm-ants { position: absolute; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .3s; }
.hm-ants rect { fill: none; stroke: #C2AE90; stroke-dasharray: 6 6; stroke-linecap: round; animation: hm-march 1.2s linear infinite; }
.hm-dz-live { border-color: transparent !important; transition: border-color .3s .15s; }
.hm-dz-live .hm-ants { opacity: 1; }
.hm-dz-hot .hm-ants rect { stroke: #8B7355; animation-duration: .4s; }
@keyframes hm-march { to { stroke-dashoffset: -26; } }
.up-card.hm-peek-host { margin-top: 56px; }   /* on top of the lede's 24px (flex items don't collapse) */
@media (max-width: 980px) { .hm-hero .hm-left .card.hm-peek-host { margin-top: 84px; } }   /* collapses with the header's margin, so the whole gap */
@media (min-width: 981px) { .hm-hero .hm-peek, .hm-hero .hm-peek-say { display: none; } }   /* the hero stage has the desk Aarav */
body.hm-off .hm-peek, body.hm-off .hm-peek-say, body.hm-off .hm-pk-ink, body.hm-off .hm-pk-ripple, body.hm-off .hm-ants { display: none !important; }
@media (prefers-reduced-motion: reduce) { .hm-peek, .hm-peek-say { transition: none; animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .hm *, .hm *::before, .hm *::after, .hm-hero *, .hm-hero *::before, .hm-hero *::after { animation: none !important; transition: none !important; }
}

/* ---------- the ink layer: Aarav's speech, footprints, celebration bursts, the pen line, headline ink ---------- */
#aarav .say { position: absolute; left: 0; top: 0; max-width: 230px; padding: 10px 14px; border-radius: 16px; background: #1F1B16; color: #F3EBDD;
  font: 600 13.5px/1.35 'Inter', system-ui, sans-serif; box-shadow: 0 14px 30px rgba(31,27,22,.28); opacity: 0; transform-origin: 50% 100%;
  transition: opacity .25s; white-space: normal; text-align: center; }
#aarav .say::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: #1F1B16;
  transform: rotate(45deg); border-radius: 2px; }
#aarav .say.on { opacity: 1; }
#aarav .drop { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; background: #2A2520; pointer-events: none; }
#aarav .drop.b { background: #8B7355; }
@media (max-width: 600px) { #aarav .say { max-width: 170px; font-size: 12px; padding: 8px 11px; } }
.hm { position: relative; }
/* phones (index_v2): the story sits outside the padded upload body, so it takes the same 22px side gutter;
   the marquee, the design wall and the opening's ink pool still run edge to edge */
#upload-view > .hm { padding-inline: 22px; }
#upload-view > .hm > .hm-marquee, #upload-view > .hm > .hm-wall, #upload-view > .hm > .hm-open { margin-inline: -22px; }
#upload-view > .hm > .hm-open { padding-inline: 22px; }
.hm > * { position: relative; z-index: 1; }
.hm > .hm-thread { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.hm-thread path.line { fill: none; stroke: #8B7355; stroke-width: 2.2; stroke-linecap: round; opacity: .55; }
.hm-thread circle { fill: #1F1B16; opacity: .8; }
.hm h2.hm-inking { -webkit-mask-image: linear-gradient(100deg, #000 42%, rgba(0,0,0,.35) 50%, transparent 58%); mask-image: linear-gradient(100deg, #000 42%, rgba(0,0,0,.35) 50%, transparent 58%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: var(--mp, 0% 0); mask-position: var(--mp, 0% 0); }
.hm-swash { position: absolute; left: -3%; width: 106%; bottom: -.12em; height: .34em; overflow: visible; pointer-events: none; }
.hm-swash path { fill: none; stroke: #1F1B16; stroke-width: 6; stroke-linecap: round; }
.hm-swash-host { position: relative; display: inline-block; }
body.hm-off .hm-swash { display: none; }