/* helobelo — dorflerpatrik.com/helobelo
   Product page. System type (New York for display, SF for text), white page,
   one black chapter at night, coral #D97757 as the only accent. */

:root {
  --coral: #d97757;
  --coral-deep: #c4623f;
  --ink: #000;
  --page: #fff;
  --soft: #f5f5f7;
  --muted: #6e6e73;
  --hair: rgba(0, 0, 0, 0.1);
  --them: #e9e9eb;
  --serif: "New York", ui-serif, "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --max: 1080px;
  --gutter: max(22px, 4vw);
  --phone-w: clamp(250px, 27vw, 340px);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  background: var(--page);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.h1 { font-size: clamp(54px, 10vw, 128px); }
.h2 { font-size: clamp(40px, 6.4vw, 80px); }
.h3 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; }
.lede {
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.4;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--muted);
  max-width: 34ch;
}
.lede b { color: var(--ink); font-weight: 600; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- phone ---------- */
.phone {
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 1293 / 2656;
  flex: none;
  container-type: inline-size;
}
.phone-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}
.phone-screen {
  position: absolute;
  left: 4.4857%; top: 1.8825%;
  width: 91.1833%; height: 96.2349%;
  border-radius: 13.6% / 6.3%;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
  z-index: 1;
  font-family: var(--sans);
  --pt: calc(91.1833cqw / 393); /* one iPhone point; .phone is the container */
  font-size: calc(17 * var(--pt));
  line-height: 1.29;
  letter-spacing: -0.02em;
}
.status {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(54 * var(--pt));
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(6 * var(--pt)) calc(36 * var(--pt)) 0 calc(48 * var(--pt));
  font-weight: 600; font-size: calc(17 * var(--pt));
  z-index: 4;
}
.status i { display: flex; gap: calc(6 * var(--pt)); align-items: center; }
.status i::before { content: ""; width: calc(18 * var(--pt)); height: calc(12 * var(--pt)); background: currentColor; -webkit-mask: var(--wifi) center / contain no-repeat; mask: var(--wifi) center / contain no-repeat; }
.status i::after { content: ""; width: calc(27 * var(--pt)); height: calc(13 * var(--pt)); border-radius: calc(4 * var(--pt)); background: currentColor; }
:root { --wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Cpath d='M9 2.6c2.5 0 4.8 1 6.5 2.6l1.3-1.3C14.7 1.8 12 .7 9 .7S3.3 1.8 1.2 3.9l1.3 1.3C4.2 3.6 6.5 2.6 9 2.6zm0 3.7c1.5 0 2.9.6 3.9 1.5l1.3-1.3C12.8 5.2 11 4.4 9 4.4S5.2 5.2 3.8 6.5l1.3 1.3c1-.9 2.4-1.5 3.9-1.5zm0 3.6c.6 0 1.1.2 1.5.5L9 12 7.5 10.4c.4-.3.9-.5 1.5-.5z'/%3E%3C/svg%3E"); }

/* glass control (Liquid Glass stand-in for the web) */
.glass {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 4px 18px rgba(0, 0, 0, 0.08);
}

/* ---------- the helobelo bubble ---------- */
.bub {
  position: relative;
  max-width: 78%;
  padding: calc(9 * var(--pt)) calc(15 * var(--pt)) calc(11 * var(--pt));
  border-radius: calc(20 * var(--pt));
  background: var(--them);
  color: #000;
  width: fit-content;
  overflow-wrap: anywhere;
}
.bub::after {
  content: "";
  position: absolute; bottom: 0;
  width: calc(12 * var(--pt)); height: calc(20 * var(--pt));
  background: inherit;
  -webkit-mask: var(--hook) bottom / 100% 100% no-repeat;
  mask: var(--hook) bottom / 100% 100% no-repeat;
}
.bub.them { border-bottom-left-radius: calc(5 * var(--pt)); margin-left: calc(6 * var(--pt)); }
.bub.them::after { left: calc(-6 * var(--pt)); }
.bub.me {
  background: var(--coral); color: #fff;
  margin-left: auto; margin-right: calc(6 * var(--pt));
  border-bottom-right-radius: calc(5 * var(--pt));
}
.bub.me::after { right: calc(-6 * var(--pt)); transform: scaleX(-1); }
.bub.nohook::after { display: none; }
.bub.nohook.them { border-bottom-left-radius: calc(20 * var(--pt)); }
.bub.nohook.me { border-bottom-right-radius: calc(20 * var(--pt)); }
:root { --hook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20' preserveAspectRatio='none'%3E%3Cpath d='M6.4 0v10.6c.3 3.6-1.6 6.6-4.7 8.1-.9.4-.6 1.3.3 1.3H12V0z'/%3E%3C/svg%3E"); }

.thread {
  position: absolute; left: 0; right: 0; bottom: calc(96 * var(--pt));
  display: flex; flex-direction: column; gap: calc(3 * var(--pt));
  padding: 0 calc(12 * var(--pt));
}
.thread .gap { height: calc(8 * var(--pt)); }
.topbar {
  position: absolute; top: calc(58 * var(--pt)); left: calc(16 * var(--pt)); right: calc(16 * var(--pt));
  display: flex; align-items: center; justify-content: space-between; z-index: 3;
}
.cbtn {
  width: calc(46 * var(--pt)); height: calc(46 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center;
}
.cbtn svg { width: 44%; height: 44%; }
.titlecap {
  height: calc(40 * var(--pt)); padding: 0 calc(16 * var(--pt));
  border-radius: 999px; display: flex; align-items: center;
  font-weight: 600; font-size: calc(16 * var(--pt));
}
.composer {
  position: absolute; left: calc(12 * var(--pt)); right: calc(12 * var(--pt)); bottom: calc(34 * var(--pt));
  height: calc(50 * var(--pt)); border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(6 * var(--pt)) 0 calc(18 * var(--pt));
  color: #a1a1a6; font-size: calc(17 * var(--pt)); z-index: 3;
}
.composer .send {
  width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: 50%;
  background: var(--coral); display: grid; place-items: center;
}
.composer .send svg { width: 50%; height: 50%; }

/* ---------- sections ---------- */
section { position: relative; }
.chapter { padding-block: clamp(110px, 16vh, 180px); }
.kicker {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 600; color: var(--coral);
  margin-bottom: 14px; letter-spacing: -0.01em;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--coral); color: #fff;
  padding: 12px 22px; border-radius: 980px; font-weight: 600; font-size: 17px;
  transition: transform 0.3s var(--spring), background 0.2s;
}
.btn:hover { background: var(--coral-deep); }
.btn:active { transform: scale(0.96); }

/* scenes: tall scroll tracks with a sticky stage */
.track { position: relative; }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* feature rows */
.row {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.row.flip { grid-template-columns: auto 1fr; }
.row.flip .copy { order: 2; }
.copy .h2 { margin-bottom: 22px; }
.copy .lede { max-width: 30ch; }

/* tiles */
.tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: clamp(48px, 7vh, 80px);
}
.tile {
  background: var(--soft); border-radius: 28px;
  padding: 34px 30px 30px; min-height: 300px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; position: relative;
}
.tile h3 { font-family: var(--serif); font-size: 26px; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 8px; }
.tile p { color: var(--muted); font-size: 16px; line-height: 1.42; }
.tile.wide { grid-column: span 2; }

/* night chapter */
.night { background: #000; color: #fff; }
.night .lede { color: rgba(255, 255, 255, 0.6); }
.night .lede b { color: #fff; }
.night .tile { background: #161617; }
.night .tile p { color: rgba(255, 255, 255, 0.58); }

/* final */
.final { text-align: center; padding: clamp(120px, 18vh, 200px) 0 clamp(90px, 12vh, 140px); }
.final .icon { width: 132px; height: 132px; margin: 0 auto 34px; box-shadow: 0 20px 50px color-mix(in srgb, var(--coral) 30%, transparent); }
.final .h1 { margin-bottom: 18px; }
.final .lede { margin: 0 auto 36px; }

footer {
  border-top: 0.5px solid var(--hair);
  padding: 22px 0 40px; font-size: 12px; color: var(--muted);
}
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a:hover { color: var(--ink); }

/* reveal on enter (used sparingly; scenes do their own motion) */
.rise { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--out), transform 1.1s var(--out); }
.rise.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .row, .row.flip { grid-template-columns: 1fr; text-align: center; }
  .row.flip .copy { order: 0; }
  .row .phone, .row .demo { margin: 0 auto; }
  .copy .lede { margin: 0 auto; }
  .tiles { grid-template-columns: 1fr; }
  .tile.wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
}

@keyframes caret { 50% { opacity: 0; } }

.keys { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 26px; font-size: 15px; color: var(--muted); }
.keys kbd {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 8px;
  display: inline-grid; place-items: center;
  background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.12), inset 0 0 0 0.5px rgba(0,0,0,.12);
}
.keys span { margin: 0 14px 0 6px; }

/* ---------- live tiles (tiles.js) ---------- */
.tile > div:last-child:not(:first-child) { margin-top: 28px; }

/* mute */
.mute-row { display: flex; align-items: center; gap: 12px; background: #262628; border-radius: 16px; padding: 12px 14px; }
.mute-av { width: 34px; height: 34px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; font-weight: 600; font-size: 15px; transition: background .4s; }
.mute-name { flex: 1; font-weight: 600; }
.mute-time { background: #3a3a3c; border-radius: 8px; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.mute-btn { position: relative; color: var(--coral); font-weight: 600; min-width: 64px; text-align: right; transition: color .4s; }
.mute-btn > span { display: block; transition: opacity .35s, transform .45s var(--spring); }
.mute-b { position: absolute; right: 0; top: 0; opacity: 0; transform: translateY(8px); }
.on .mute-a { opacity: 0; transform: translateY(-8px); }
.on .mute-b { opacity: 1; transform: none; }
.mute-after { display: flex; align-items: center; gap: 7px; margin: 12px 0 0 60px; color: rgba(255,255,255,.58); font-size: 15px; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .5s var(--out); }
.on .mute-after { opacity: 1; transform: none; }
.mute-after b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.mute-bell { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; }
.mute-bell path:first-child { stroke: none; }
.mute-n { display: inline-block; }
.mute-n.bump { animation: bump .45s var(--spring); }
@keyframes bump { 0% { transform: scale(1.5); color: var(--coral); } 100% { transform: none; } }

/* sleep */
.sleep { text-align: center; }
.sleep-time { font-family: var(--serif); font-size: 60px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.sleep-banner {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: rgba(255,255,255,.1); border-radius: 20px; padding: 11px 12px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14);
  transition: opacity .35s, transform .6s var(--spring);
}
.sleep-banner.out { opacity: 0; transform: translateY(-14px) scale(.96); }
.sleep-icon { width: 38px; height: 38px; flex: none; }
.sleep-banner div { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; }
.sleep-banner b { display: block; font-weight: 600; }
.sleep-banner span { color: rgba(255,255,255,.75); }
.sleep-banner time { align-self: flex-start; font-size: 12px; color: rgba(255,255,255,.45); }

/* buzz: Mac reading, iPhone silent */
.buzz { display: flex; align-items: flex-end; justify-content: center; gap: 18px; height: 120px; }
.buzz-mac { position: relative; width: 150px; height: 96px; border-radius: 9px; background: #262628; box-shadow: inset 0 0 0 1.5px #3a3a3c; padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.buzz-mac::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: -8px; height: 8px; border-radius: 0 0 8px 8px; background: #3a3a3c; }
.buzz-mac i { height: 12px; width: 60%; border-radius: 7px; background: #48484a; }
.buzz-mac i.m { width: 45%; margin-left: auto; background: var(--coral); }
.buzz-mac i.n { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--spring); }
.buzz.go .buzz-mac i.n { opacity: 1; transform: none; }
.buzz-phone { position: relative; width: 48px; height: 96px; border-radius: 11px; background: #111; box-shadow: inset 0 0 0 1.5px #3a3a3c; }
.buzz-phone span { position: absolute; top: 18px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }

/* receipts */
.rcpt { display: flex; flex-direction: column; align-items: flex-end; max-width: 360px; margin-left: auto; }
.rcpt-bub { font-size: 17px; }
.rcpt-state { position: relative; height: 20px; margin: 6px 8px 0 0; font-size: 13px; color: rgba(255,255,255,.55); min-width: 120px; }
.rcpt-state span { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; opacity: 0; transform: translateY(5px); transition: opacity .35s, transform .45s var(--out); }
.rcpt-state span.cur { opacity: 1; transform: none; }
.rcpt-state svg { width: 13px; height: 13px; }

/* photo: 28px preview, then sharp */
.photo { position: relative; height: 150px; border-radius: 18px; overflow: hidden; background: #ddd; }
.photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-lo { filter: blur(10px); transform: scale(1.15); }
.photo-hi { opacity: 0; transition: opacity .5s ease; }
.photo.sharp .photo-hi { opacity: 1; }

/* accents */
.accents { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.accents button { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); transition: transform .4s var(--spring); position: relative; max-width: 40px; }
.accents button:hover { transform: scale(1.08); }
.accents button[aria-checked="true"]::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c); }
.accents button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
:root { transition: none; }
.btn, .pill, .kicker, .hero-cta a.more { transition-property: background, color, transform; transition-duration: .5s; }

/* name it first */
.name-field { display: flex; align-items: center; height: 52px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.06); padding: 0 20px; font-family: var(--serif); font-size: 20px; }
.name-caret { width: 2px; height: 22px; background: var(--coral); margin-left: 1px; animation: caret 1.1s steps(1) infinite; }
.name-hit { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 20px 0; opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .5s var(--spring); }
.name-hit.show { opacity: 1; transform: none; }
.name-hit b { font-weight: 600; }
.name-hit span { color: var(--muted); font-size: 14px; }

/* username */
.user { display: flex; align-items: center; justify-content: space-between; height: 52px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.06); padding: 0 6px 0 20px; font-size: 17px; }
.user-btn { position: relative; height: 40px; min-width: 112px; border-radius: 999px; background: var(--coral); color: #fff; font-weight: 600; font-size: 15px; display: grid; place-items: center; overflow: hidden; transition: background .4s; }
.user-btn > span { grid-area: 1/1; transition: opacity .3s, transform .45s var(--spring); }
.u-b { opacity: 0; transform: translateY(14px); }
.user.done .user-btn { background: #e8e8ed; color: var(--muted); }
.user.done .u-a { opacity: 0; transform: translateY(-14px); }
.user.done .u-b { opacity: 1; transform: none; }

@media (max-width: 860px) { .rcpt { margin: 0 auto; } }

.center { text-wrap: balance; }

/* ---------- brand marks that follow the accent picker ---------- */
.hb-mark, .hb-wordmark {
  position: relative; display: inline-block; flex: none;
  background: var(--coral);
  -webkit-mask: url("assets/helobeloMarkBlob.svg") center / 100% 100% no-repeat;
  mask: url("assets/helobeloMarkBlob.svg") center / 100% 100% no-repeat;
  aspect-ratio: 161 / 131;
  transition: background-color .5s;
}
.hb-wordmark {
  aspect-ratio: 403 / 131;
  -webkit-mask-image: url("assets/helobeloWordmarkBlob.svg");
  mask-image: url("assets/helobeloWordmarkBlob.svg");
}
.hb-mark::after, .hb-wordmark::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: url("assets/helobeloMarkGlyph.svg") center / 100% 100% no-repeat;
  mask: url("assets/helobeloMarkGlyph.svg") center / 100% 100% no-repeat;
}
.hb-wordmark::after { -webkit-mask-image: url("assets/helobeloWordmarkGlyph.svg"); mask-image: url("assets/helobeloWordmarkGlyph.svg"); }
/* the app icon, built from the same layers so it re-tints too */
.hb-icon {
  display: grid; place-items: center;
  border-radius: 22.37%;
  background: linear-gradient(180deg, #fff, #f5f0ec);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08);
}
.hb-icon .hb-mark { width: 70.7%; transform: translate(-1.5%, 1%); }

/* ---------- people: real photos instead of initials ---------- */
.face { background-size: cover !important; background-position: center 30% !important; color: transparent !important; }
.face > b, .face > .threads-badge { color: #fff; }
.face-mira { background-image: url("assets/av-mira.jpg") !important; }
.face-dani { background-image: url("assets/av-dani.jpg") !important; }
.face-lea { background-image: url("assets/av-lea.jpg") !important; }