/* The looping Google Calendar -> Seam -> iPhone demo and the hero it sits in.
   Used by the home page and the SEO pages; js/demo.js fills in today's dates
   and scales the 720x660 illustration to its column. */

/* ---------- hero ---------- */
.hero .wrap { display: flex; align-items: center; gap: 40px; padding-top: 56px; padding-bottom: 72px; }
.hero-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.eyebrow-pill { align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.eyebrow-pill .dot { width: 8px; height: 8px; border-radius: 999px; }
.eyebrow-pill .grp { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero h1 { font-size: 70px; line-height: 0.98; letter-spacing: -0.02em; }
.hero h1 span { white-space: nowrap; }
.hero h1.h1-long { font-size: 54px; line-height: 1.04; letter-spacing: -0.01em; }
/* Translated headlines run longer than the English ones. On the home page the
   three poster lines may wrap rather than overflow. */
html:not([lang="en"]) .hero h1:not(.h1-long) { font-size: 62px; }
html:not([lang="en"]) .hero h1 span { white-space: normal; }
/* Longer translations: the notification lines get 1px smaller, and the
   "· two-way sync" tail of the eyebrow (said again in the lede) is dropped. */
html:not([lang="en"]) .ticker { font-size: 13px; }
html:not([lang="en"]) .eyebrow-pill .sync { display: none; }
html:not([lang="en"]) .hero h1.h1-long { font-size: 44px; line-height: 1.08; }
.hero .lede { max-width: 470px; font-size: 19px; line-height: 1.55; color: var(--muted); }
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-cta small { font-size: 14px; color: var(--muted); }

.stage-wrap { flex: 0 0 720px; max-width: 720px; }
.stage { position: relative; width: 100%; height: 660px; }
.stage-inner { position: absolute; left: 0; top: 0; width: 720px; height: 660px; transform-origin: 0 0; }
.notif.notif-standalone { display: none; }

/* Google Calendar (web) */
.gcal { position: absolute; left: 0; top: 70px; width: 450px; height: 430px; border-radius: 12px; background: var(--g-bg); border: 1px solid var(--g-line); box-shadow: 0 24px 50px -24px var(--g-shadow); overflow: hidden; font-family: Roboto, Arial, sans-serif; color: var(--g-text); }
.g-chrome { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; background: var(--g-chrome); border-bottom: 1px solid var(--g-line); }
.g-chrome i { width: 9px; height: 9px; border-radius: 999px; background: var(--g-dot); }
.g-chrome span { margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--g-bg); font-size: 11px; color: var(--g-muted); }
.g-toolbar { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--g-line); font-size: 12px; }
.g-create { padding: 7px 12px; border-radius: 999px; background: var(--g-create); box-shadow: var(--g-create-shadow); font-weight: 500; }
.g-create b { font-size: 15px; font-weight: 400; color: var(--g-plus); }
.g-btn { padding: 5px 11px; border-radius: 6px; border: 1px solid var(--g-line); }
.g-arrows { font-size: 14px; color: var(--g-muted); letter-spacing: 6px; }
.g-month { font-size: 15px; }
.g-view { margin-left: auto; }
.g-body { position: relative; height: 358px; }
.g-day { position: absolute; top: 0; height: 50px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; }
.g-day small { font-size: 10px; color: var(--g-muted); }
.g-day b { width: 26px; height: 26px; border-radius: 999px; font-size: 15px; font-weight: 400; display: flex; align-items: center; justify-content: center; }
.g-day.today small { color: var(--g-today); font-weight: 500; }
.g-day.today b { background: var(--g-today); color: var(--g-today-ink); }
.g-col { position: absolute; top: 50px; width: 1px; height: 308px; background: var(--g-line); }
.g-grid { position: absolute; left: 0; right: 0; top: 50px; height: 308px; border-top: 1px solid var(--g-line); background: repeating-linear-gradient(180deg, transparent 0, transparent 33px, var(--g-grid) 33px, var(--g-grid) 34px); }
.g-hours { position: absolute; left: 0; top: 44px; width: 36px; display: flex; flex-direction: column; text-align: right; font-size: 9px; color: var(--g-muted); }
.g-hours span { height: 34px; }
.g-ev { position: absolute; border-radius: 5px; padding: 3px 5px; font-size: 9px; line-height: 1.3; overflow: hidden; }
.g-ev b, .g-ev span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ev b { font-weight: 500; }
.g-ev.busy { background: repeating-linear-gradient(135deg, var(--g-busy-a), var(--g-busy-a) 5px, var(--g-busy-b) 5px, var(--g-busy-b) 10px); border: 1px solid var(--g-busy-line); color: var(--g-busy-ink); }
.g-kick { background: var(--g-kick); color: var(--g-kick-ink); width: 100%; height: 100%; }
.tag { position: absolute; padding: 2px 7px; border-radius: 999px; background: var(--tag-bg); color: var(--tag-ink); font-size: 9px; white-space: nowrap; }

/* iPhone Calendar */
.phone { position: absolute; left: 470px; top: 0; width: 250px; height: 530px; border-radius: 46px; background: var(--i-frame); border: 1px solid var(--i-frame-line); padding: 10px; box-shadow: 0 30px 60px -28px var(--shadow); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 37px; background: var(--i-screen); overflow: hidden; color: var(--i-text); }
.island { position: absolute; left: 83px; top: 9px; width: 64px; height: 20px; border-radius: 999px; background: #1C1C1E; }
.i-nav { position: absolute; left: 14px; right: 14px; top: 42px; display: flex; align-items: center; justify-content: space-between; color: var(--i-red); font-size: 14px; }
.i-nav svg { width: 15px; height: 15px; stroke: var(--i-red); }
.i-week { position: absolute; left: 10px; right: 10px; top: 70px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; row-gap: 4px; }
.i-week small { font-size: 9px; color: var(--i-muted); }
.i-week b { justify-self: center; width: 26px; height: 26px; border-radius: 999px; font-size: 14px; font-weight: 400; display: flex; align-items: center; justify-content: center; }
.i-week b.we { color: var(--i-muted); }
.i-week b.today { background: var(--i-red); color: #FFFFFF; font-weight: 600; }
.i-date { position: absolute; left: 14px; right: 14px; top: 128px; font-size: 12px; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--i-sep); }
.i-day { position: absolute; left: 0; right: 0; top: 160px; height: 340px; }
.i-hours { position: absolute; left: 14px; right: 10px; top: 0; font-size: 9px; color: var(--i-muted); }
.i-hours div { height: 36px; border-top: 1px solid var(--i-sep); }
.i-ev { position: absolute; left: 52px; right: 12px; height: 32px; border-radius: 4px; padding: 3px 6px; font-size: 10px; line-height: 1.3; }
.i-ev b { font-weight: 600; display: block; }
.i-ev.blue { background: var(--i-blue-bg); border-left: 3px solid var(--i-blue-bar); color: var(--i-blue-ink); }
.i-ev.orange { background: var(--i-orange-bg); border-left: 3px solid var(--i-orange-bar); color: var(--i-orange-ink); }
.i-ev.purple { background: var(--i-purple-bg); border-left: 3px solid var(--i-purple-bar); color: var(--i-purple-ink); }
.i-ring { position: absolute; inset: 0; border-radius: 4px; }

/* Seam notification */
.notif { display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 16px; border-radius: 22px; background: var(--n-bg); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border: 1px solid var(--n-line); box-shadow: var(--n-shadow); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color: var(--n-ink); }
.stage .notif { position: absolute; left: 50px; top: 562px; width: 520px; }
.app-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: #F1ECE1; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; }
.app-icon svg { width: 30px; height: 30px; }
.n-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.n-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--n-muted); }
.n-head b { font-weight: 600; letter-spacing: 0.02em; }
.ticker { position: relative; height: 19px; font-size: 14px; }
.ticker > span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.ticker > span.L0 { color: var(--n-muted); }
.ticker > span.L6 { opacity: 1; }
.ticker strong { font-weight: 600; }
.ok { color: var(--ok); font-weight: 700; }
.cables { position: absolute; left: 0; top: 0; width: 720px; height: 660px; overflow: visible; pointer-events: none; }

/* ---------- motion (12s hero loop, 9s activity loop, 6s privacy loop) ---------- */
.m { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.gNew { animation-name: gNew; } .gRing { animation-name: gRing; } .iNew { animation-name: iNew; } .iTag { animation-name: iTag; }
.iDentist { animation-name: iDentist; } .iRing { animation-name: iRing; } .gBusy { animation-name: gBusy; } .gTag { animation-name: gTag; }
.L0 { animation-name: L0; } .L1 { animation-name: L1; } .L2 { animation-name: L2; } .L3 { animation-name: L3; } .L4 { animation-name: L4; } .L5 { animation-name: L5; } .L6 { animation-name: L6; }
.litGin { animation-name: litGin; } .litPout { animation-name: litPout; } .litPin { animation-name: litPin; } .litGout { animation-name: litGout; }
.chGin { animation-name: chGin; } .chPout { animation-name: chPout; } .chPin { animation-name: chPin; } .chGout { animation-name: chGout; }
.d1 { animation-delay: .15s; } .d2 { animation-delay: .3s; }
.led { animation: led 2.4s ease-in-out infinite; }
@keyframes gNew { 0%,4% { opacity: 0; filter: blur(6px); transform: scale(.96); } 9%,92% { opacity: 1; filter: blur(0); transform: none; } 97%,100% { opacity: 0; filter: blur(4px); } }
@keyframes gRing { 0%,9% { box-shadow: 0 0 0 0 rgba(26,115,232,0); } 12%,20% { box-shadow: 0 0 0 3px rgba(26,115,232,.4); } 26%,100% { box-shadow: 0 0 0 0 rgba(26,115,232,0); } }
@keyframes iNew { 0%,34% { opacity: 0; filter: blur(6px); transform: scale(.96); } 39%,92% { opacity: 1; filter: blur(0); transform: none; } 97%,100% { opacity: 0; filter: blur(4px); } }
@keyframes iTag { 0%,36% { opacity: 0; transform: translateY(4px); } 40%,47% { opacity: 1; transform: none; } 51%,100% { opacity: 0; } }
@keyframes iDentist { 0%,46% { opacity: 0; filter: blur(6px); transform: scale(.96); } 50%,92% { opacity: 1; filter: blur(0); transform: none; } 97%,100% { opacity: 0; filter: blur(4px); } }
@keyframes iRing { 0%,50% { box-shadow: 0 0 0 0 rgba(175,82,222,0); } 53%,60% { box-shadow: 0 0 0 3px rgba(175,82,222,.4); } 66%,100% { box-shadow: 0 0 0 0 rgba(175,82,222,0); } }
@keyframes gBusy { 0%,75% { opacity: 0; filter: blur(6px); transform: scale(.96); } 80%,92% { opacity: 1; filter: blur(0); transform: none; } 97%,100% { opacity: 0; filter: blur(4px); } }
@keyframes gTag { 0%,77% { opacity: 0; transform: translateY(4px); } 81%,89% { opacity: 1; transform: none; } 93%,100% { opacity: 0; } }
@keyframes L0 { 0%,5% { opacity: 1; transform: none; filter: blur(0); } 7%,94% { opacity: 0; transform: translateY(-6px); filter: blur(3px); } 97%,100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes L1 { 0%,6% { opacity: 0; transform: translateY(6px); filter: blur(3px); } 9%,23% { opacity: 1; transform: none; filter: blur(0); } 25%,100% { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
@keyframes L2 { 0%,24% { opacity: 0; transform: translateY(6px); filter: blur(3px); } 26%,33% { opacity: 1; transform: none; filter: blur(0); } 35%,100% { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
@keyframes L3 { 0%,34% { opacity: 0; transform: translateY(6px); filter: blur(3px); } 37%,47% { opacity: 1; transform: none; filter: blur(0); } 50%,100% { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
@keyframes L4 { 0%,49% { opacity: 0; transform: translateY(6px); filter: blur(3px); } 52%,61% { opacity: 1; transform: none; filter: blur(0); } 63%,100% { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
@keyframes L5 { 0%,62% { opacity: 0; transform: translateY(6px); filter: blur(3px); } 64%,74% { opacity: 1; transform: none; filter: blur(0); } 76%,100% { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
@keyframes L6 { 0%,75% { opacity: 0; transform: translateY(6px); filter: blur(3px); } 78%,93% { opacity: 1; transform: none; filter: blur(0); } 96%,100% { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
@keyframes litGin { 0%,9% { opacity: 0; } 11%,21% { opacity: 1; } 24%,100% { opacity: 0; } }
@keyframes litPout { 0%,25% { opacity: 0; } 27%,35% { opacity: 1; } 38%,100% { opacity: 0; } }
@keyframes litPin { 0%,51% { opacity: 0; } 53%,61% { opacity: 1; } 64%,100% { opacity: 0; } }
@keyframes litGout { 0%,64% { opacity: 0; } 66%,75% { opacity: 1; } 78%,100% { opacity: 0; } }
@keyframes chGin { 0%,10% { opacity: 0; } 11.5% { opacity: 1; } 14% { opacity: .2; } 16.5% { opacity: 1; } 19% { opacity: .2; } 21% { opacity: 1; } 22.5%,100% { opacity: 0; } }
@keyframes chPout { 0%,26% { opacity: 0; } 27.5% { opacity: 1; } 30% { opacity: .2; } 32.5% { opacity: 1; } 35% { opacity: .2; } 36%,100% { opacity: 0; } }
@keyframes chPin { 0%,52% { opacity: 0; } 53.5% { opacity: 1; } 56% { opacity: .2; } 58.5% { opacity: 1; } 61% { opacity: .2; } 62%,100% { opacity: 0; } }
@keyframes chGout { 0%,65% { opacity: 0; } 66.5% { opacity: 1; } 69% { opacity: .2; } 71.5% { opacity: 1; } 74% { opacity: .2; } 75.5%,100% { opacity: 0; } }
@keyframes led { 0%,100% { opacity: .45; } 50% { opacity: 1; } }


@media (max-width: 1260px) {
  .hero .wrap { flex-direction: column; align-items: stretch; gap: 48px; }
  .stage-wrap { flex: none; width: 100%; max-width: 720px; margin: 0 auto; }
}
/* Below ~620px the whole illustration is scaled to fit; the notification
   would become too small to read, so a full-size copy is shown under it. */
@media (max-width: 620px) {
  .hero .wrap { padding-top: 32px; padding-bottom: 48px; gap: 32px; }
  .hero h1 { font-size: 46px; }
  .hero h1.h1-long { font-size: 36px; }
  html:not([lang="en"]) .hero h1.h1-long { font-size: 32px; }
  html:not([lang="en"]) .hero h1:not(.h1-long) { font-size: 40px; }
  .hero .lede { font-size: 17px; }
  .eyebrow-pill { font-size: 13px; }
  .eyebrow-pill .sync { display: none; }
  .stage .notif, .stage .cables { display: none; }
  .notif.notif-standalone { display: flex; margin-top: 16px; }
}
/* Reduced motion: keep the story (fades and text changes) but drop movement and blur. */
@media (prefers-reduced-motion: reduce) {
  .m { transform: none !important; filter: none !important; }
}