/* Landing page in the spirit of apple.com: system font, big tight headlines, short copy, full-width tiles
   that alternate white / light grey / black, product pictures, a thin translucent bar on top.
   The landing page keeps its own light look in dark mode (dark tiles are part of the design). */

.ap {
  --ap-ink: #1d1d1f; --ap-sub: #6e6e73; --ap-gray: #f5f5f7; --ap-line: #d2d2d7;
  --ap-accent: #ff4d01; --ap-accent-hover: #e04300; --ap-link: #d03a00;
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-family: var(--ap-font); color: var(--ap-ink); background: #fff; color-scheme: light;
  max-width: none; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em;
}
html:has(#welcome:not([hidden])), body:has(#welcome:not([hidden])) { background: #fff; }
.ap h1, .ap h2, .ap h3, .ap .btn { font-family: var(--ap-font); }

/* ---------- top bar ---------- */
.ap-nav { position: sticky; top: 0; z-index: 20; height: 48px; background: rgba(251, 251, 253, .8);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.08); }
.ap-nav-in { max-width: 1000px; height: 100%; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ap-logo { display: inline-flex; gap: 7px; align-items: center; font-weight: 600; font-size: 17px; color: var(--ap-ink); text-decoration: none; letter-spacing: -0.02em; }
.ap-logo img { width: 24px; height: 24px; }
.ap-links { display: flex; gap: 30px; }
.ap-links a { font-size: 12.5px; color: rgba(0,0,0,.8); text-decoration: none; letter-spacing: 0; }
.ap-links a:hover { color: #000; }
.ap-nav-cta { font: 500 12.5px var(--ap-font); color: #fff; background: var(--ap-ink); border: 0; border-radius: 980px; padding: 6px 14px; min-height: 30px; cursor: pointer; }
@media (max-width: 760px) { .ap-links { display: none; } }

/* ---------- type ---------- */
.ap-eyebrow { margin: 0 0 6px; font-size: 19px; font-weight: 600; color: var(--ap-accent); letter-spacing: 0; }
.ap-h1 { margin: 0; font-size: clamp(44px, 8vw, 80px); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; }
.ap-h2 { margin: 0; font-size: clamp(40px, 6.5vw, 64px); line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; }
.ap-h3 { margin: 0; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
.ap-sub { margin: 14px auto 0; max-width: 640px; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.38; color: var(--ap-sub); font-weight: 500; letter-spacing: -0.01em; }
.ap-small { margin: 10px auto 0; max-width: 380px; font-size: 17px; line-height: 1.45; color: var(--ap-sub); }

/* ---------- buttons and links ---------- */
.ap-ctas { display: flex; gap: 26px; align-items: center; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.ap-btn { font: 500 17px var(--ap-font); color: #fff; background: var(--ap-accent); border: 0; border-radius: 980px; padding: 12px 24px; min-height: 46px; cursor: pointer; letter-spacing: -0.01em; }
.ap-btn:hover { background: var(--ap-accent-hover); }
.ap-more { font-size: 17px; color: var(--ap-link); text-decoration: none; }
.ap-more::after { content: " ›"; font-size: 1.15em; }
.ap-more:hover { text-decoration: underline; }

/* ---------- sections ---------- */
.ap-hero, .ap-tile { text-align: center; padding: clamp(56px, 9vw, 96px) 22px 0; overflow: hidden; }
.ap-hero { padding-top: clamp(40px, 7vw, 76px); }
.ap-tile { margin-top: 12px; padding-bottom: clamp(56px, 8vw, 80px); }
.ap-white { background: #fff; }
.ap-gray { background: var(--ap-gray); }
.ap-cream { background: #fbf5ee; }
.ap-dark, .ap-black { background: #000; color: #f5f5f7; }
.ap-dark .ap-sub, .ap-black .ap-small { color: #a1a1a6; }
.ap-dark .ap-eyebrow, .ap-black .ap-eyebrow { color: #ff7a45; }

/* ---------- phone mockups ---------- */
.ap-phone { width: 300px; height: 610px; margin: 48px auto -170px; padding: 11px; border-radius: 54px; background: #1d1d1f;
  box-shadow: 0 0 0 2px #3a3a3c, 0 40px 80px -20px rgba(0,0,0,.35); position: relative; }
.ap-phone-dark { height: 470px; margin-bottom: 0; box-shadow: 0 0 0 2px #48484a, 0 30px 80px -10px rgba(255,77,1,.25); }
.ap-screen { height: 100%; border-radius: 44px; overflow: hidden; position: relative; }
.ap-home { background: radial-gradient(120% 80% at 20% 0%, #ffb067 0%, #f0742a 35%, #7a3cff 100%); }
.ap-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 0; font-size: 13px; font-weight: 600; color: #fff; }
.ap-notch { width: 92px; height: 26px; background: #000; border-radius: 20px; }
.ap-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 6px; padding: 26px 16px 0; }
.ap-icons span { display: grid; justify-items: center; gap: 5px; font-size: 11px; color: #fff; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ap .app-icon .i { width: 52%; height: 52%; display: block; }
.ap-icons .app-icon, .ap-dock .app-icon { --s: 54px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.ap-dock { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-around; padding: 12px; border-radius: 32px;
  background: rgba(255,255,255,.28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* chat phone */
.ap-chatscreen { background: #efeae2; color: #111; text-align: left; display: flex; flex-direction: column; }
.ap-chathead { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 46px 16px 12px; background: #fff; border-bottom: 1px solid #e5e5ea; }
.ap-chathead b { font-size: 15px; } .ap-chathead small { grid-column: 2; font-size: 11.5px; color: #8e8e93; }
.ap-av { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--ap-font); font-style: normal; color: #fff; background: linear-gradient(160deg, #7fd67f, #2e9437); }
.ap-bubbles { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; }
.ap-bubbles p { margin: 0; max-width: 78%; padding: 7px 11px; border-radius: 12px; font-size: 14.5px; line-height: 1.3; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.ap-bubbles .in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.ap-bubbles .in b { display: block; font-size: 12px; color: #d9534f; }
.ap-bubbles .in:nth-child(3) b { color: #8e44ad; }
.ap-bubbles .out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 3px; }
.ap-bubbles .out s { text-decoration: none; color: #34b7f1; font-size: 11px; margin-left: 6px; }
.ap-bubbles .call { align-self: center; background: #fff; font-size: 12.5px; font-weight: 600; color: #3a3a3c; }

/* make: prompt → app */
.ap-make { display: flex; gap: 22px; align-items: center; justify-content: center; margin: 48px auto 0; flex-wrap: wrap; max-width: 820px; }
.ap-prompt { max-width: 330px; padding: 18px 22px; border-radius: 22px 22px 22px 6px; background: #fff; box-shadow: 0 10px 30px -12px rgba(0,0,0,.18);
  font-size: 19px; line-height: 1.35; text-align: left; font-weight: 500; }
.ap-arrow { width: 40px; height: 2px; background: var(--ap-line); position: relative; }
.ap-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--ap-line); }
.ap-made { display: grid; justify-items: center; gap: 8px; padding: 24px 30px; border-radius: 28px; background: #fff; box-shadow: 0 10px 30px -12px rgba(0,0,0,.18); }
.ap-made b { font-size: 17px; } .ap-made small { font-size: 13px; color: var(--ap-sub); }
@media (max-width: 640px) { .ap-arrow { transform: rotate(90deg); margin: 6px 0; } }

/* ---------- product grid (2 × 2) ---------- */
.ap-grid { display: grid; gap: 12px; padding: 12px; grid-template-columns: 1fr; }
@media (min-width: 834px) { .ap-grid { grid-template-columns: 1fr 1fr; } }
.ap-card { text-align: center; padding: 52px 24px 0; min-height: 440px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.ap-card > :last-child { margin-top: auto; }
.ap-doc { position: relative; width: 210px; height: 270px; margin: 34px 0 -30px; padding: 30px 26px; background: #fff; border-radius: 10px;
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.28); transform: rotate(-4deg); display: grid; align-content: start; gap: 14px; }
.ap-doc span { display: block; height: 9px; border-radius: 5px; background: #e5e5ea; }
.ap-doc .short { width: 60%; }
.ap-doc em { position: absolute; right: -16px; bottom: 42px; font-style: normal; font: 800 15px var(--ap-font); color: #fff; background: #e2412f; padding: 8px 14px; border-radius: 10px; transform: rotate(4deg); box-shadow: 0 8px 20px rgba(226,65,47,.35); }
.ap-price { margin: 30px 0 46px; font-size: clamp(80px, 12vw, 120px); font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  background: linear-gradient(160deg, #ff8a4c, #ff4d01 55%, #c23500); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-people { display: flex; margin: 40px 0 60px; }
.ap-people i { width: 74px; height: 74px; margin-left: -14px; border-radius: 50%; display: grid; place-items: center; font: 700 28px var(--ap-font); font-style: normal; color: #fff;
  border: 4px solid #000; background: linear-gradient(160deg, #6fb4ff, #2f6ee6); }
.ap-people i:nth-child(2) { background: linear-gradient(160deg, #ff8cc0, #de3f88); }
.ap-people i:nth-child(3) { background: linear-gradient(160deg, #ffad5c, #ec6a0c); }
.ap-people i:nth-child(4) { background: #2c2c2e; color: #a1a1a6; }
.ap-row { display: flex; gap: 14px; margin: 40px 0 64px; }
.ap-row .app-icon { --s: 64px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.25); }

/* ---------- store preview ---------- */
.ap-store .cards { max-width: 1000px; margin: 40px auto 0; text-align: left; grid-auto-columns: minmax(220px, 44%); }
@media (min-width: 760px) { .ap-store .cards { grid-auto-columns: minmax(220px, 23.5%); } }
.ap-store .scard { border: 1px solid #e5e5ea; box-shadow: none; }

/* ---------- privacy ---------- */
.ap-facts { list-style: none; padding: 0; margin: 46px auto 0; max-width: 900px; display: grid; gap: 28px; }
@media (min-width: 760px) { .ap-facts { grid-template-columns: repeat(3, 1fr); } }
.ap-facts li { font-size: 19px; color: #a1a1a6; line-height: 1.4; }
.ap-facts b { display: block; color: #f5f5f7; font-size: 24px; letter-spacing: -0.02em; margin-bottom: 4px; }

/* ---------- start (sign-in) ---------- */
.ap-login { max-width: 420px; margin: 34px auto 0; text-align: left; background: #fff; border-radius: 22px; padding: 26px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.2); }
.ap-login .login { margin: 0; }
.ap-login label { font-size: 14px; font-weight: 600; color: var(--ap-ink); }
.ap-login input { font-family: var(--ap-font); background: #fff; color: var(--ap-ink); border: 1px solid var(--ap-line); }
.ap-login .btn { font-family: var(--ap-font); font-weight: 500; background: var(--ap-accent); color: #fff; border-radius: 12px; }
.ap-login .muted { color: var(--ap-sub); }

/* ---------- footer ---------- */
.ap-foot { background: var(--ap-gray); color: #6e6e73; font-size: 12px; line-height: 1.5; padding: 22px; margin-top: 12px; }
.ap-foot p { max-width: 980px; margin: 0 auto 10px; }
.ap-foot-links { display: flex; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--ap-line); padding-top: 12px; }
.ap-foot a { color: #424245; text-decoration: none; }
.ap-foot a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  .ap-phone, .ap-made, .ap-prompt, .ap-card { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .ap-card:hover .ap-doc { transform: rotate(-2deg) translateY(-6px); }
}

@media (min-width: 834px) { .ap-card { min-height: 560px; } }

/* ---------- Zoombad's own look (clearly distinct from any other brand) ----------
   rounded floating tiles with space around them, the rounded Nunito brand font for headlines,
   and the orange brand gradient on key words. */
.ap { --ap-head: "Nunito Variable", ui-rounded, "SF Pro Rounded", var(--ap-font); }
.ap-h1, .ap-h2, .ap-h3, .ap-logo, .ap-price, .ap-facts b { font-family: var(--ap-head); letter-spacing: -0.025em; }
.ap-h1 { font-weight: 900; }
.ap-h2, .ap-h3 { font-weight: 850; }
.ap-h1 em, .ap-h2 em { font-style: normal; background: linear-gradient(120deg, #ff8a4c, #ff4d01 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-tile, .ap-foot { margin: 12px 12px 0; border-radius: 32px; }
.ap-grid { padding: 12px 12px 0; }
.ap-card { border-radius: 32px; }
@media (min-width: 1100px) { .ap-tile, .ap-grid, .ap-foot { max-width: 1240px; margin-left: auto; margin-right: auto; } .ap-grid { padding-left: 0; padding-right: 0; } }
.ap-foot { margin-bottom: 12px; }

/* the zoombad wordmark (fox + name) in the top bar */
.ap-logo img { width: auto; height: 30px; display: block; }

/* "what it is / what it isn't" line under the hero buttons */
.ap-strip { margin: 22px auto 0; max-width: 560px; font-size: 15px; line-height: 1.45; color: var(--ap-sub); }
.ap-strip b { color: var(--ap-ink); font-weight: 700; }

/* sign-in reason (gift, invite, Store) */
.signin-reason { margin: -4px auto 14px; max-width: 40ch; padding: 10px 14px; border-radius: 14px; background: #fff; font-weight: 700; color: #1d1d1f; }
/* comfortable tap targets, without changing how they look */
.ap-nav-cta, .ap-more, .ap-foot-links a { position: relative; }
.ap-nav-cta::after, .ap-more::after, .ap-foot-links a::after { content: ""; position: absolute; inset: -8px -4px; }
.ap-hero p, .ap-sub { text-wrap: balance; }

/* ---------- the Privacy page (/privacy) ---------- */
body.pp { margin: 0; background: #fff; }
.ap-h1 em, .ap-h2 em { font-style: normal; color: var(--ap-accent); }
a.ap-btn, a.ap-nav-cta { display: inline-flex; align-items: center; text-decoration: none; }
.pp-list { list-style: none; padding: 0; margin: 40px auto 0; max-width: 900px; display: grid; gap: 22px; text-align: left; }
@media (min-width: 760px) { .pp-list { grid-template-columns: repeat(3, 1fr); text-align: center; } }
.pp-list li { font-size: 17px; line-height: 1.45; color: var(--ap-sub); }
.pp-list b { display: block; color: var(--ap-ink); font-size: 21px; letter-spacing: -0.02em; margin-bottom: 4px; }
.ap-dark .pp-list li { color: #a1a1a6; }
.ap-dark .pp-list b { color: #f5f5f7; }
.ap-links a[aria-current="page"] { color: #000; font-weight: 600; }
.ap-foot a { color: inherit; }