/* Vestry website prototype.
   Layout rules copied from muse.ai's own stylesheet (read 2026-10-20): the same container, breakpoints,
   spacing, type scale and scroll effects. Muse uses Meta's "Optimistic" typeface; Figtree is the
   closest free substitute. Breakpoints: md = 768px, lg = 1024px. */

:root {
  --bg: #fcfcfc;
  --bg-alt: #f3f4f5;
  --ink: #111112;
  --muted: #00040996;
  --field: rgba(0, 0, 0, .05);
  --divider: #0000001a;
  --blue: #0064d4;
  --blue-action: color-mix(in srgb, #0064d4 90%, #000);
  --blue-light: #5297e7;
  /* Wordmark and app icon: deep to bright blue, like muse's squiggle */
  --frost: #ffffffc2;
  --shadow-1: 0 2px 8px 0 #11111214, 0 2px 16px 0 #1111120a;
  --shadow-2: 0 4px 12px 0 #1111121f, 0 6px 24px 0 #11111214;
  --placeholder: #e7e8ea;
  --placeholder-ink: rgba(0, 4, 9, .42);
  --gutter: 20px;
  --font: "Figtree", system-ui, sans-serif;
  /* Figtree is lighter than muse.ai's typeface at the same weight; these values give the same ink
     (measured 2026-10-20): muse 400 = Figtree 440, 500 = 570, 600 = 640 */
  --w-regular: 440;
  --w-medium: 570;
  --w-semibold: 640;
}
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: var(--w-regular); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* The page container: 1440px max, side padding 20 / 40 / 56 */
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }

.wordmark {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--ink);
}
/* The t's crossbar runs into the r (wordmark option A, internal/wordmark-options.html) */
.wordmark .tr { letter-spacing: -.075em; }

/* App icon: the white gem on a black rounded square, as in the Shopify App Store. Its size is its font-size. */
.app-icon {
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
  border-radius: 22.5%;
  background: #000;
  box-shadow: 0 1px 3px rgba(17, 17, 18, .06), 0 6px 16px rgba(17, 17, 18, .08);
}
.app-icon > img { display: block; width: 62%; height: auto; transform: translateY(2%); }

/* Placeholders keep the exact size of the image or video they stand for */
.ph {
  background: var(--placeholder);
  color: var(--placeholder-ink);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 13px;
  font-weight: var(--w-medium);
  letter-spacing: .02em;
  overflow: hidden;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--blue-action);
  color: #fff;
  font: var(--w-medium) 14px/20px var(--font);
  cursor: pointer;
}

/* Muse's rounded corners are squircles where the browser supports them (radius doubled) */
.squircle-24 { border-radius: 24px; }
.squircle-32 { border-radius: 32px; }
@supports (corner-shape: squircle) {
  .squircle-24 { corner-shape: squircle; border-radius: 48px; }
  .squircle-32 { corner-shape: squircle; border-radius: 64px; }
}

/* ---------- Header: sticky, 60px; its background fades in over the first 64px of scroll ---------- */
.site-header { position: sticky; top: 0; z-index: 40; height: 60px; margin-bottom: -60px; }
.site-header .header-bg { position: absolute; inset: 0; background: var(--bg); opacity: var(--header-bg, 0); }
.site-header .wrap { position: relative; height: 60px; }
.header-inner { position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.header-inner .wordmark { position: absolute; inset-inline-start: 0; font-size: 27px; }
/* Middle mark: 32px; fades in over 0.2s once the hero icon passes under the header, vanishes at once on the way back */
.header-inner .header-icon { font-size: 32px; opacity: 0; visibility: hidden; }
.site-header.scrolled .header-icon { visibility: visible; animation: header-mark-enter .2s ease-out both; }
@keyframes header-mark-enter { from { opacity: 0; } to { opacity: 1; } }
.header-inner .btn { position: absolute; inset-inline-end: 0; height: 36px; padding-inline: 16px; }

/* ---------- Hero: one full screen; top spacing depends on the screen height ---------- */
.hero { position: relative; min-height: 100vh; overflow: hidden; background: var(--bg); }
.hero-inner { position: relative; z-index: 20; display: flex; flex-direction: column; min-height: 100vh; width: 100%; max-width: 1440px; margin-inline: auto; padding: 24px var(--gutter); }
.hero-body { display: flex; flex: 1 1 0%; width: 100%; justify-content: center; align-items: flex-start; padding-top: calc(7vh - 24px); }
.hero-content { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.hero-icon { font-size: 64px; }

/* Phones: -.02em instead of muse's -.01em so "Vestry, try-on" fits one line like "Muse, AI that" */
.hero h1 { margin: 24px 0 16px; width: 100%; font-size: 47px; line-height: 52px; font-weight: var(--w-medium); letter-spacing: -.02em; color: var(--ink); }
.hero h1 .line { display: block; width: 100%; overflow-wrap: anywhere; }
.hero h1 .rotator { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.rotator > span { grid-area: 1 / 1; justify-self: center; width: max-content; max-width: 100%; opacity: 0; translate: 0 .3em; transition: opacity .45s, translate .45s; }
.rotator > span.on { opacity: 1; translate: 0; }
.rotator > span.off { opacity: 0; translate: 0 -.3em; }

.install-wrap { display: flex; width: 100%; flex-direction: column; align-items: center; }
.install { display: flex; flex-direction: column; width: 100%; max-width: 408px; }
.install label { display: flex; height: 44px; align-items: center; justify-content: center; font-size: 16px; line-height: 22px; color: var(--muted); }
.install input {
  margin-top: 6px;
  width: 100%;
  height: 54px;
  padding: 10px 16px;
  border: 0;
  border-radius: 20px;
  background: var(--field);
  font: var(--w-regular) 16px/22px var(--font);
  color: var(--ink);
  outline: none;
}
.install input:focus { box-shadow: inset 0 0 0 1px var(--blue); }
.install .note { margin-top: 8px; padding-inline: 6px; font-size: 12px; line-height: 16px; color: var(--muted); }
.install .note a { color: var(--blue); }
.install .btn { margin-top: 20px; height: 44px; padding-inline: 14px; background: var(--blue); font-size: 16px; line-height: 22px; }

/* "Learn more" floats at the bottom of the screen and fades out as soon as the page scrolls */
.learn-more {
  position: fixed;
  inset-inline: 0;
  bottom: 16px;
  z-index: 30;
  margin-inline: auto;
  display: inline-flex;
  width: fit-content;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-inline: 16px;
  border-radius: 999px;
  background: var(--frost);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--w-medium);
  color: var(--ink);
  transition: opacity .15s;
}
.learn-more.hidden { opacity: 0; pointer-events: none; }

/* ---------- Shared section type ---------- */
.section-header { max-width: 768px; margin-inline: auto; padding-inline: 16px; text-align: center; }
.title { font-size: 22px; line-height: 28px; font-weight: var(--w-medium); text-wrap: balance; color: var(--ink); }
.lead { margin: 12px auto 0; max-width: 768px; font-size: 18px; line-height: 26px; text-wrap: pretty; color: var(--muted); }
.lead a { color: var(--blue); }
.lead b { color: var(--ink); font-weight: var(--w-medium); }

/* Video frames: 82% wide, capped by the screen height; they grow from 90% as they scroll into view */
.media { margin-top: 40px; }
.media-inner { width: 100%; max-width: 116.622vh; margin-inline: auto; }
.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 65.6vh;
  overflow: hidden;
  transform: translateY(calc(40px * (1 - var(--p, 0)))) scale(calc(.9 + .1 * var(--p, 0)));
  will-change: transform;
}

/* A film keeps its 16:9 shape at every width, so phones see all of it. Its button plays and pauses:
   while the film plays the button is invisible until hovered or focused, but stays reachable by keyboard. */
.frame.film { aspect-ratio: 16 / 9; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg-alt); }
.film .i-pause, .film.playing .i-play { display: none; }
.film.playing .i-pause { display: block; }
.film.playing .play span { opacity: 0; transition: opacity .2s; }
.film.playing .play:hover span, .film.playing .play:focus-visible span { opacity: 1; }

/* ---------- Intro: its grey background fades in with the video ---------- */
.intro { position: relative; isolation: isolate; padding-block: 56px; }
.intro .section-bg { position: absolute; inset: 0; z-index: -10; background: var(--bg-alt); opacity: var(--p, 0); }

/* ---------- Features: six alternating rows ---------- */
.feature { width: 100%; background: var(--bg); }
.feature:nth-child(even) { background: var(--bg-alt); }
.feature-inner { display: grid; width: 100%; max-width: 1440px; margin-inline: auto; align-items: center; gap: 16px; padding: 56px var(--gutter); }
.feature-text { order: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.feature-text .lead { max-width: 576px; font-size: 16px; line-height: 22px; }
.feature-media { order: 2; display: flex; align-items: center; justify-content: center; }
.feature-media .ph, .feature-media img { width: 100%; max-width: 80vh; max-height: 80vh; aspect-ratio: 1; }
.feature-media img { display: block; height: auto; object-fit: cover; }

/* ---------- Tour ---------- */
.tour { background: var(--bg); padding-block: 56px; }
.tour .frame { display: flex; align-items: center; justify-content: center; }
.play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
}
.play span { display: flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 999px; background: var(--frost); box-shadow: var(--shadow-2); backdrop-filter: blur(48px); -webkit-backdrop-filter: blur(48px); }

/* ---------- Learn more: link list, then the final call to action; each at least 560px ---------- */
.more-row { display: flex; min-height: 560px; align-items: center; padding-block: 56px; }
.more-grid { display: grid; width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.more-intro { text-align: center; }
.more-intro .lead { max-width: 384px; }
.more-list { display: flex; flex-direction: column; list-style: none; }
.more-list a { display: grid; width: 100%; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 16px; margin-inline: -12px; padding-inline: 12px; border-radius: 16px; }
.more-list .icon-cell { padding-block: 24px; }
.more-list .icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; color: var(--muted); }
.more-list .text-cell { display: flex; min-width: 0; align-items: center; gap: 16px; padding-block: 24px; }
.more-list li + li .text-cell { border-top: 1px solid var(--divider); }
.more-list .text-cell > div { flex: 1 1 0%; min-width: 0; }
.more-list h3 { font-size: 18px; line-height: 26px; font-weight: var(--w-semibold); text-wrap: balance; color: var(--ink); }
.more-list p { margin-top: 8px; font-size: 16px; line-height: 22px; text-wrap: pretty; color: var(--muted); }
.more-list .chevron { display: inline-flex; flex-shrink: 0; width: 20px; height: 20px; align-items: center; justify-content: center; color: var(--muted); }

.cta { display: flex; min-height: 560px; align-items: center; justify-content: center; padding-block: 56px; }
.cta-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; width: 256px; max-width: 100%; margin-top: 32px; }
.cta-actions .btn { width: 100%; height: 48px; padding-inline: 32px; font-size: 16px; line-height: 22px; } /* muse.ai uses 14px here; 16px asked for, 2026-10-20 */

/* ---------- Footer: 32px above and below a 20px line ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--bg); padding-bottom: 32px; }
.footer-grid { display: grid; gap: 24px; padding-top: 32px; }
.footer-grid p, .footer-grid nav a, .footer-grid .made { font-size: 14px; line-height: 20px; color: var(--muted); }
.footer-grid p { text-align: center; }
.footer-grid nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
.footer-grid nav a:hover { color: var(--ink); }
.footer-grid .made { display: flex; align-items: center; justify-content: center; gap: 8px; }

.proto-badge { position: fixed; left: 16px; bottom: 16px; z-index: 50; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; opacity: .8; }
.proto-badge.zoom-warning { background: #d93025; opacity: 1; }

/* ---------- Short screens ---------- */
@media (max-height: 699px) {
  .hero-body { padding-top: calc(4vh - 24px); }
  .hero-icon { font-size: 56px; }
  .hero h1 { margin-bottom: 4px; font-size: 34px; line-height: 40px; }
}

/* ---------- md: 768px and up ---------- */
@media (min-width: 768px) {
  .hero-inner { padding-block: 32px; }
  .hero-body { padding-top: calc(12vh - 32px); }
  .hero-icon { font-size: 100px; }
  .hero h1 { margin-bottom: 16px; font-size: 48px; line-height: 56px; letter-spacing: -.01em; }
  .install-wrap { margin-top: 32px; }
  .title { font-size: 40px; line-height: 46px; }
  .intro { padding-bottom: 96px; }
  .tour { padding-top: 96px; }
  .media-inner { width: 82%; }
  .frame { aspect-ratio: 16 / 9; }
  .feature-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
  .feature:nth-child(odd) .feature-text { order: 2; }
  .feature:nth-child(odd) .feature-media { order: 1; }
  .feature-text { text-align: start; }
  .feature-text .lead { margin-inline: 0; font-size: 18px; line-height: 26px; }
  .footer-grid { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .footer-grid p { text-align: start; }
  .footer-grid .made { justify-content: flex-end; }
}

/* ---------- lg: 1024px and up ---------- */
@media (min-width: 1024px) {
  .hero-body { padding-top: calc(18vh - 32px); }
  .hero h1 { font-size: 62.445px; line-height: 1.1; }
  .feature-inner { gap: 64px; }
  .more-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .more-intro { grid-column: span 5 / span 5; align-self: center; text-align: start; }
  .more-intro .lead { margin-inline: 0; }
  .more-list { grid-column: span 7 / span 7; }
}
@media (min-width: 1024px) and (max-height: 850px) { .hero-body { padding-top: calc(14vh - 32px); } }
@media (min-width: 1024px) and (max-height: 799px) { .hero-body { padding-top: calc(8vh - 32px); } }

@media (prefers-reduced-motion: reduce) {
  .rotator > span, .learn-more { transition: none; }
  .site-header.scrolled .header-icon { animation: none; opacity: 1; }
  .frame { transform: none; }
}