/* SeventySevenLabs home: hero, Apps, How we build and Updates. Loads after
   css/site.css, which has the tokens, header, buttons, phone and footer. */

.page {
  min-height: 100vh;
  background: var(--ground);
  font-family: 'Jost', sans-serif;
  color: var(--ink);
  overflow-x: clip;
}

.section { padding-top: clamp(96px, 11vw, 150px); }

.h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -1.4px;
  text-wrap: balance;
}
/* ---------- Buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  font-weight: 500;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.pill:active { transform: scale(.97); }
.pill-ink { background: var(--ink); color: #FFFFFF; }
.pill-ink:hover { background: var(--green); color: #FFFFFF; }
.pill-ink svg { margin-top: -2px; flex: none; }
.pill-line { border: 1px solid #DDD8CE; }
.pill-line:hover { border-color: var(--green); color: var(--green); }
.pill-lg { gap: 8px; height: 48px; padding: 0 24px; font-size: 15px; }
.pill-lg.pill-line { padding: 0 22px; }
.pill-sm { gap: 7px; height: 40px; padding: 0 18px; font-size: 13.5px; }
/* A leading glyph (the Apple logo on Download pills) sits optically heavy. */
.pill-lg:has(> svg) { padding-left: 20px; }
.pill-sm:has(> svg) { padding-left: 15px; }

/* ---------- Download + QR popover ---------- */
.dl { position: relative; }
.qr-pop {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 12px; /* bridge so the cursor can travel from pill to card */
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px) scale(.98);
  transition: opacity 200ms ease, transform 380ms cubic-bezier(.34,1.3,.64,1), visibility 0s linear 380ms;
}
.dl.is-open .qr-pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}
@media (pointer: fine) and (min-width: 820px) {
  .qr-pop { display: block; }
}
.qr-card {
  width: 204px;
  padding: 18px 18px 16px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 24px 50px -18px rgba(20,21,15,.3);
  text-align: center;
  box-sizing: border-box;
}
.qr-card img { display: block; margin: 0 auto; width: 148px; height: 148px; }
.qr-title { margin-top: 14px; font-size: 14px; font-weight: 500; }
.qr-note { margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--text-3); }
.qr-link { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--text-2); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 5;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 96px) 26px 0;
  text-align: center;
}
.hero h1 {
  margin: 0;
  font-size: clamp(46px, 6.4vw, 82px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-sub {
  margin: 22px auto 0;
  max-width: 440px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}
.hero-ctas { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; }

/* ---------- Apps ---------- */
.hero-btn { height: 50px; padding: 0 24px; font-size: 15px; }
.hero-btn.btn-line { padding: 0 22px; }

.apps { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 40px; align-items: start; }
.apps-head { padding-top: 30px; }
.apps-head .h2 { margin-top: 14px; }

/* The whole card is one link (.app-card-link stretched over it); the
   waitlist button sits above it as a second action, so the two never nest. */
.app-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: 0 0 0 rgba(20,21,15,0);
  transition: transform 380ms var(--pop), box-shadow 380ms ease;
}
.app-card:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -24px rgba(20,21,15,.32); }
.app-card:has(.app-card-link:focus-visible) { outline: 2px solid var(--green); outline-offset: 4px; }
.app-card-link { position: absolute; inset: 0; z-index: 1; border-radius: 30px; }
.app-card-link:focus-visible { outline: 0; }
.app-card-body { padding: 32px; display: flex; flex-direction: column; min-width: 0; }
.app-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.app-icon { width: 64px; height: 64px; border-radius: 15px; border: 1px solid var(--line); box-sizing: border-box; display: block; }
.app-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--control);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.app-arrow svg { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease-out), stroke 200ms ease; }
.app-card:hover .app-arrow, .app-card:has(.app-card-link:focus-visible) .app-arrow { background: var(--ink); border-color: var(--ink); }
.app-card:hover .app-arrow svg, .app-card:has(.app-card-link:focus-visible) .app-arrow svg { stroke: #FFFFFF; transform: translateX(2px); }
.app-card-name { display: flex; align-items: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.app-card-name h3 { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -.7px; }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 99px;
  background: #FFFFFF;
  border: 1px solid var(--control);
  font-size: 12px;
  font-weight: 500;
}
.status-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: block; }
.app-card-line { margin: 10px 0 0; max-width: 380px; font-size: 16.5px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.app-card-actions { margin-top: auto; padding-top: 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.app-card-actions .btn { position: relative; z-index: 2; }
.app-card-more { font-size: 14px; font-weight: 500; transition: color 150ms ease; }
.app-card:hover .app-card-more { color: var(--green); }
.app-card-shot { height: 380px; padding-top: 36px; box-sizing: border-box; overflow: hidden; display: flex; justify-content: center; }
.app-card-shot .ph { --ps: .66; }
/* A card with no phone shot (Busy Desks), under the first one. */
.app-card-sm { grid-column: 2; margin-top: -20px; grid-template-columns: minmax(0,1fr); }
.app-card-sm .app-card-actions { padding-top: 22px; }

.lab-row {
  margin-top: 20px;
  padding: 18px 22px 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px 20px;
  flex-wrap: wrap;
  border: 1px dashed var(--control);
  border-radius: 22px;
}
.lab-icon { width: 32px; height: 32px; flex: none; box-sizing: border-box; border-radius: 9px; border: 1.5px dashed var(--control); }
.lab-row p { margin: 0; flex: 1 1 260px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.lab-row b { color: var(--ink); font-weight: 500; }
.lab-btn { height: 40px; padding: 0 16px; font-size: 13.5px; }
.lab-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 819.98px) {
  .apps { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .apps-head { padding-top: 0; }
  .app-card { grid-template-columns: minmax(0,1fr); }
  .app-card-sm { grid-column: auto; margin-top: -8px; }
  .app-card-body { padding: 26px 24px 28px; }
  .app-card-shot { height: 300px; padding-top: 0; }
}

/* ---------- How we build ---------- */
.principles { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 36px 32px; }
.principle { border-top: 1px solid var(--line); padding-top: 28px; }
.principle svg { display: block; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.principle svg [data-draw] { stroke-dasharray: 200; }
.principle-title { margin-top: 20px; font-size: 21px; font-weight: 400; letter-spacing: -.4px; }
.principle p { margin: 8px 0 0; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

/* ---------- Updates ---------- */
.news {
  background: var(--ink);
  border-radius: 32px;
  padding: clamp(48px, 6vw, 68px) clamp(22px, 4vw, 40px);
  text-align: center;
}
.news .mark { justify-content: center; gap: 7px; }
.news .mark-bars { gap: 4.5px; }
.news .mark-bars span { width: 5.5px; background: #FFFFFF; }
.news .mark-bars span:first-child { height: 24px; }
.news .mark-bars span:last-child { height: 17px; }
.news .mark-name { font-size: 27px; letter-spacing: -.9px; color: #FFFFFF; }
.news-heads { display: grid; margin-top: 22px; }
.news-h {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: #FFFFFF;
  text-wrap: balance;
}
.news-sub { margin: 14px auto 0; max-width: 370px; font-size: 15.5px; font-weight: 400; line-height: 1.6; color: #A8A29A; text-wrap: pretty; }

.news-h0 { transition: opacity 300ms ease, transform 500ms var(--ease-out); }
.news-h1 { opacity: 0; transform: translateY(10px); transition: opacity 300ms ease 120ms, transform 500ms var(--ease-out) 120ms; }
.news.is-done .news-h0 { opacity: 0; transform: translateY(-10px); }
.news.is-done .news-h1 { opacity: 1; transform: none; }

.notify { display: flex; flex-direction: column; align-items: center; margin: 28px 0 0; }
.field {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 430px;
  height: 56px;
  padding: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  box-sizing: border-box;
  transition: border-color 150ms ease;
}
.field:focus-within { border-color: rgba(255,255,255,.4); }
.field.is-err { border-color: #F0B7AE; }
.field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0 18px;
  color: #FFFFFF;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  transition: opacity 300ms ease;
}
.notify-btn {
  position: relative;
  flex: none;
  height: 44px;
  width: 118px;
  border-radius: 99px;
  border: 0;
  padding: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: width 560ms var(--pop), background-color 150ms ease, transform 150ms ease;
}
.notify-btn:hover { background: #8FE3CD; }
.notify-btn:active { transform: scale(.97); }
.notify-lbl { display: block; white-space: nowrap; transition: opacity 150ms ease; }
.notify-btn svg { position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -9px; }
.notify-btn path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 380ms var(--ease-out) 260ms;
}
.notify.is-busy .notify-btn { cursor: progress; }
.news.is-done .field input { opacity: .45; }
.news.is-done .notify-btn { width: 44px; background: #FFFFFF; cursor: default; transform: none; }
.news.is-done .notify-lbl { opacity: 0; }
.news.is-done .notify-btn path { stroke-dashoffset: 0; }
.notify-err { min-height: 22px; margin-top: 10px; font-size: 13px; font-weight: 400; color: #F0B7AE; }

/* ---------- Scroll reveals ----------
   home.js adds .rv only to [data-reveal] blocks (or a group's children)
   that start below the fold, then .is-in once they scroll into view. */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out) var(--rv-d, 0ms), transform 600ms var(--ease-out) var(--rv-d, 0ms);
}
.rv.is-in { opacity: 1; transform: none; }
.rv [data-draw] { stroke-dashoffset: 200; transition: stroke-dashoffset 1100ms var(--ease-out) var(--draw-d, 0ms); }
.rv.is-in [data-draw] { stroke-dashoffset: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .pill:active, .notify-btn:active,
  .app-card:hover, .app-card:hover .app-arrow svg,
  .news-h0, .news-h1 { transform: none !important; }
  .qr-pop, .dl.is-open .qr-pop { transform: translate(-50%, 0); }
}