/* Hem hero phone: the app flow rebuilt in code (no video).
   Everything inside .hs is laid out in iPhone points (393 x 852) and scaled to fit the frame. */

/* ---- The phone mockup: one device, built at a fixed size and scaled as a whole ----
   Body 324 x 681 with a 9px bezel around a 306 x 663 screen. JS sets --pk (<= 1) only when the space is
   too small, and the whole device (corners, bezel, buttons, screen) scales together, so it looks the same everywhere. */
.phone-wrap {
  position: relative; z-index: 1; display: block; flex-shrink: 0;
  width: calc(324px * var(--pk, 1)); height: calc(681.4px * var(--pk, 1));
  scale: var(--hs-press, 1);
  -webkit-user-select: none; user-select: none;   /* touch screens: the page scrolls normally over the phone */
}
.phone-scaler { position: absolute; left: 0; top: 0; width: 324px; height: 681.4px; transform: scale(var(--pk, 1)); transform-origin: 0 0; }
.phone-device {
  position: relative; z-index: 1; width: 100%; height: 100%; box-sizing: border-box; padding: 9px; border-radius: 56px;
  background: linear-gradient(145deg, #2c2c2f 0%, #121214 28%, #0a0a0b 70%, #26262a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 3px #060606, 0 40px 120px rgba(0, 0, 0, .6);
}
.phone-device > .phone-frame {
  position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
  border: 0; border-radius: 47px; box-shadow: none; background: #000; overflow: hidden;
}
.phone-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #3b3b3f, #17171a); }
.phone-btn-action { left: -3px; top: 118px; height: 26px; }
.phone-btn-up     { left: -3px; top: 166px; height: 46px; }
.phone-btn-down   { left: -3px; top: 222px; height: 46px; }
.phone-btn-power  { right: -3px; top: 186px; height: 74px; }

.hs {
  position: absolute; inset: 0; overflow: hidden;
  background: #010101; color: #d6d5d7;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.hs:focus { outline: none; }
.hs:focus-visible { box-shadow: inset 0 0 0 2px #d6d5d7; border-radius: inherit; }
.hs-stage {
  position: absolute; left: 0; top: 0; width: 393px; height: 852px;
  transform-origin: 0 0; transform: scale(var(--hs-scale, .784));
}
.hs-stage > * { position: absolute; }
.hs .hs-c { left: 0; top: 0; } /* centred elements: positioned by JS (x/y = centre point) */

/* Background */
.hs-gw { width: 600px; height: 600px; left: 0; top: 0; pointer-events: none; }
.hs-glow { position: absolute; inset: 0; border-radius: 50%; animation: hs-drift 11s ease-in-out infinite alternate; }
.hs-glow-amber { animation-duration: 13s; animation-delay: -4s; }
.hs-glow-purple { animation-duration: 15s; animation-delay: -7s; }
@keyframes hs-drift { from { transform: translate(-10px, 6px) scale(1); } to { transform: translate(12px, -8px) scale(1.06); } }
.hs-glow-rust   { background: radial-gradient(circle, rgba(132, 42, 4, .95) 0%, rgba(110, 34, 3, .55) 32%, rgba(90, 28, 2, 0) 68%); }
.hs-glow-amber  { background: radial-gradient(circle, rgba(104, 98, 70, .75) 0%, rgba(80, 74, 50, .35) 30%, rgba(60, 55, 35, 0) 66%); }
.hs-glow-purple { background: radial-gradient(circle, rgba(62, 38, 84, .9) 0%, rgba(48, 30, 66, .45) 32%, rgba(40, 24, 54, 0) 66%); }
.hs-glow-amber2 { background: radial-gradient(circle, rgba(92, 84, 52, .6) 0%, rgba(70, 64, 40, .25) 32%, rgba(60, 55, 35, 0) 66%); }
.hs-green { /* prayer background: the app's blue (light at the top, deep navy below). Class name kept for the Webflow embed. */
  inset: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(120% 30% at 30% 0%, rgba(150, 182, 200, .55) 0%, rgba(150, 182, 200, 0) 100%),
    linear-gradient(180deg, #87a7ba 0%, #6691a6 15%, #437389 26%, #295568 34%, #18414f 42%, #0e2a38 55%, #081c28 72%, #061620 86%, #08151d 100%);
}

/* Status bar */
.hs-time { left: 0; top: 0; width: 112px; height: 54px; display: flex; align-items: center; justify-content: center;
  font: 600 16px/1 Geist, -apple-system, sans-serif; color: #fff; letter-spacing: -.01em; }
.hs-island { left: 134px; top: 11px; width: 125px; height: 37px; border-radius: 20px; background: #000; }
.hs-status { right: 26px; top: 19px; display: flex; align-items: center; gap: 6px; color: #fff; }

/* Header */
.hs-logo { width: 70px; height: 24px; color: #fff; }
.hs-logo svg { display: block; width: 100%; height: 100%; }
.hs-btn {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); color: #d6d5d7;
}
.hs-btn svg { width: 18px; height: 18px; }
.hs-btn-t { width: 42px; height: 42px; background: #f2f1f3; color: #1a1a1a; font: 400 19px/1 Newsreader, Georgia, serif; }
.hs-btn-sos { font: 500 11px/1 Geist, sans-serif; letter-spacing: .02em; }

/* Serif headings */
.hs-serif {
  font-family: Newsreader, Georgia, serif; font-weight: 350; font-variation-settings: "opsz" 72;
  color: #d6d5d7; text-align: center; letter-spacing: -.005em; margin: 0;
}
.hs-head { width: 340px; font-size: 39.5px; line-height: 58px; }
.hs-friend, .hs-pray { width: 340px; font-size: 42px; line-height: 1.1; }
.hs-ack { width: 350px; font-size: 40px; line-height: 1.2; color: #e4e3e6; }   /* Hem's reply before the prayer */
.hs-end-title { width: 340px; font-size: 40px; line-height: 54px; }

/* Prompt buttons -> record button */
.hs-chat { width: 64px; height: 64px; border-radius: 50%; background: #121212; border: 1px solid rgba(255, 255, 255, .05);
  display: flex; align-items: center; justify-content: center; color: #d6d5d7; box-sizing: border-box; }
.hs-chat svg { width: 19px; height: 19px; }
.hs-rec { width: 138px; height: 138px; }
.hs-rec-disc { position: absolute; inset: 0; border-radius: 50%; background: rgba(214, 213, 215, 1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0); }
.hs-rec-icon { position: absolute; left: 50%; top: 50%; width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; color: #1a1a1a; }
.hs-level { position: absolute; left: 50%; top: -1.5px; width: 12px; height: 3px; margin-left: -6px; border-radius: 2px; background: #d6d5d7; opacity: 0; }

/* Recording text */
.hs-sans { font: 400 13.5px/1.3 Geist, -apple-system, sans-serif; color: #d6d5d7; text-align: center; margin: 0; }
.hs-meta { width: 360px; }
.hs-timer { letter-spacing: .02em; }
.hs-transcript { width: 300px; margin: 32px auto 0; min-height: 18px; position: relative; line-height: 1.55; }
.hs-transcript span { display: inline-block; }
.hs-transcript .hs-final { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
.hs-breath { width: 200px; line-height: 1.3; }

/* Prayer */
.hs-chunks { inset: 0; pointer-events: none; }
.hs-chunk {
  position: absolute; left: 32px; top: 0; width: 329px; margin: 0; opacity: 0;
  font-family: Newsreader, Georgia, serif; font-weight: 350; font-variation-settings: "opsz" 72;
  font-size: 35.6px; line-height: 50px; letter-spacing: -.005em; color: #d6d5d7;
  transform-origin: 0 50%;
}

/* Closing screen */
.hs-pill { width: 353px; height: 52px; border-radius: 26px; background: rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: center; }

.hero-art { flex-direction: column; align-items: center; }

@media screen and (max-width: 991px) {
    .section-hero .split-row { row-gap: 32px; }
}
@media screen and (max-width: 767px) {
  .section-hero { padding-top: 24px; }
  .section-hero .split-row { row-gap: 22px; }
  .hero-copy { row-gap: 16px; }
}

/* ---- Highlight: a light running around the phone's edge, brighter while it waits for the next step ---- */
@property --hs-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.phone-halo {
  position: absolute; inset: -2px; z-index: 0; border-radius: 58px; pointer-events: none;
  background: conic-gradient(from var(--hs-a),
    rgba(232, 150, 70, 0) 0deg, rgba(196, 84, 30, .9) 50deg, rgba(240, 196, 110, 1) 95deg,
    rgba(150, 176, 96, .85) 140deg, rgba(150, 176, 96, 0) 200deg, rgba(232, 150, 70, 0) 360deg);
  opacity: .3; transition: opacity 1.2s ease;
  animation: hs-spin 5.5s linear infinite;
}
.phone-halo::after { /* the soft glow the rim throws around the phone */
  content: ""; position: absolute; inset: -14px; border-radius: 70px;
  background: inherit; filter: blur(26px); opacity: .6;
}
.phone-wrap.is-waiting .phone-halo { opacity: 1; }
.phone-wrap.is-waiting .phone-halo::after { animation: hs-breathe 2.8s ease-in-out infinite; }
@keyframes hs-spin { to { --hs-a: 360deg; } }
@keyframes hs-breathe { 0%, 100% { opacity: .45; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) {
  .phone-halo, .phone-wrap.is-waiting .phone-halo::after { animation: none; }
}

/* ---- Guide cue: a soft double chevron floating upward while the phone waits for a scroll / swipe / tap ---- */
.hs-cue { width: 30px; height: 30px; color: #ecebee; opacity: 0; pointer-events: none; }
.hs-cue svg { display: block; width: 100%; height: 100%; animation: hs-cue-float 1.9s cubic-bezier(.45, 0, .55, 1) infinite; }
.hs-cue-a { animation: hs-cue-fade 1.9s ease-in-out infinite; }
.hs-cue-b { animation: hs-cue-fade 1.9s ease-in-out infinite; animation-delay: -.35s; opacity: .5; }
@keyframes hs-cue-float { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-5px); } }
@keyframes hs-cue-fade { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Tiny "press" when the visitor scrolls or taps (the scale property layers on top of the reveal's transform) */
@media (prefers-reduced-motion: reduce) { .hs-cue svg, .hs-cue-a, .hs-cue-b { animation: none; } }

/* ---- Touch polish (site-wide) ----
   Turn off the browser's default blue tap rectangle (it ignores rounded corners); give our own soft press instead. */
html, a, button, input, label, [role="button"], [role="radio"], [role="slider"], .hs { -webkit-tap-highlight-color: transparent; }
.btn-primary, .btn-primary-small, .hear-pill, .hear-play, .hear-speed, .faq-toggle, .how-step, .link-quiet, .hear-read {
  transition-property: transform, background-color, border-color, color, opacity;
}
.btn-primary:active, .btn-primary-small:active, .hear-pill:active, .hear-speed:active { transform: scale(.97); }
.hear-play:active { transform: scale(.94); }
.link-quiet:active, .hear-read:active, .faq-toggle:active { opacity: .7; }

/* Keep form fields dark when the browser autofills them (Chrome paints them white otherwise) */
.field-input:-webkit-autofill, .field-input:-webkit-autofill:hover, .field-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #1b1b1b inset; box-shadow: 0 0 0 100px #1b1b1b inset;
  -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 9999s ease-out 0s;
}

/* ---- Waitlist form spacing: each label sits close to its own field, clear space between field groups ---- */
.form-stack { row-gap: 0; }
.form-stack .field-label { margin: 0 0 8px 4px; line-height: 1; }
.form-stack .field-input + .field-label { margin-top: 22px; }        /* space between one field and the next label */
.form-stack input[type="submit"] { margin-top: 28px; }              /* clear gap before the button */
#signup .card > .body-text { margin-top: -6px; margin-bottom: 4px; }  /* description closer to the title, a little air before the form */
@media screen and (max-width: 767px) {
  .form-stack input[type="submit"] { width: 100%; }                  /* full-width button lines up with the fields */
}

/* Waitlist error message: Webflow's default is a sharp pink box with pale text - make it a soft, readable note that fits the card */
#signup .w-form-fail {
  margin-top: 18px; padding: 14px 18px; border-radius: 16px;
  background: rgba(214, 92, 74, .12); border: 1px solid rgba(214, 92, 74, .35);
  color: #f1c9c2; font-size: 14px; line-height: 1.45;
}
#signup .w-form-fail div { color: inherit; }
/* Button focus: no browser blue ring after a click; a soft light ring for keyboard users */
.form-stack input[type="submit"]:focus { outline: none; }
.form-stack input[type="submit"]:focus-visible { outline: 2px solid rgba(214, 213, 215, .6); outline-offset: 3px; }

/* No-script still frame (e.g. Webflow Designer / Preview, where custom scripts don't run):
   show the first screen - logo at the top, "You don't have to find the words" - instead of every step stacked. */
.hs:not(.hs-live) .hs-c, .hs:not(.hs-live) .hs-green { opacity: 0; }
.hs:not(.hs-live) .hs-logo { opacity: 1; transform: translate(-50%, -50%) translate(196.5px, 112px); }
.hs:not(.hs-live) .hs-head-intro { opacity: 1; transform: translate(-50%, -50%) translate(196.5px, 461px); }
.hs:not(.hs-live) .hs-gw-rust   { opacity: 1;   transform: translate(-50%, -50%) translate(380px, 90px) scale(1.05); }
.hs:not(.hs-live) .hs-gw-amber  { opacity: .85; transform: translate(-50%, -50%) translate(120px, 430px) scale(.6); }
.hs:not(.hs-live) .hs-gw-purple { opacity: .35; transform: translate(-50%, -50%) translate(-60px, 860px) scale(.6); }
.hs:not(.hs-live) .hs-gw-amber2 { opacity: 0; }