/* The site, laid out from Ice's design language (apps/design/ice.css): its palette, scales and parts. */
main, .site-footer, .site-nav > div { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* The site's bar, as on Apple's product pages: Ice on the left and the waitlist on the right, frosted over the page. */
.site-nav {
  position: sticky; top: 0; z-index: 1; padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--page) 80%, transparent); backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 1px 0 var(--border);
}
.site-nav > div { height: var(--nav); display: flex; align-items: center; }

/* Home, in the large size: the hero down the middle, then scenes, one per point, each its words on the left and, on
   the right, one picture made of the app's own parts. On a phone the words sit over the picture. */
.hero, .scene { padding-block: var(--gap-xl); gap: var(--gap-l); font-size: var(--large); }
.scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20em); align-items: center; }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* A headline with a small label over it in the accent, and one muted line under it. */
hgroup { display: grid; gap: var(--gap-s); }
hgroup p { color: var(--muted); font-size: var(--body); }
hgroup .eyebrow { color: var(--accent); font-weight: 700; }
/* Ice's icon is the image iOS renders, its own shape included, so it is shown as it is; its shadow follows that shape.
   The always-on dot sits on its corner. */
.hero-icon { position: relative; }
.hero-icon img { display: block; filter: drop-shadow(0 12px 20px rgb(46 115 207 / 0.3)); }
.hero-icon .live { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border: 4px solid var(--page); }
h1 { font-size: var(--display); font-weight: 800; letter-spacing: -0.055em; line-height: 0.98; }
/* A scene's headline is one bold line. */
.scene h2 { font-size: var(--title); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }

/* The waitlist: one bar that pops up under the site's bar from every "Join the waitlist" button, its field and its
   button in one pill over the page, frosted like the site's bar. Turnstile's widget takes a row only when it asks the visitor something. */
.join {
  position: fixed; inset: calc(var(--nav) + env(safe-area-inset-top, 0px) + var(--gap)) 0 auto; margin: 0 auto;
  width: min(100% - 2 * var(--gap), 30rem); padding: 0; border: 0; overflow: visible; background: none; color: var(--ink);
  grid-template-columns: minmax(0, 1fr); gap: var(--gap-s); justify-items: center; text-align: center; transition: opacity 0.2s, translate 0.2s;
}
.join:popover-open { display: grid; }
@starting-style { .join:popover-open { opacity: 0; translate: 0 -8px; } }
.join::backdrop { background: color-mix(in srgb, var(--page) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.join small { font-size: var(--small); color: var(--muted); }
.cf-turnstile:empty { display: none; }

/* The pictures: the app's own parts on a panel. Like a screenshot, each picture keeps the app's proportions: its details
   are seven tenths of its text. */
.picture {
  display: flex; flex-direction: column; gap: var(--gap);
  padding: clamp(var(--gap), 3vw, 40px); border-radius: clamp(32px, 3.5vw, 48px);
  background: var(--tile); line-height: 1.3;
}
.bubble { align-self: flex-end; padding: 12px 18px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.on, .cover span, .chips span { font-size: 0.7em; }
.balanced { color: var(--good); }
/* A source's icon, as an app icon: its glyph in white on its own tint, in the continuous-corner shape iOS gives icons. */
.icon { flex: none; width: 1.8em; height: 1.8em; }
i.icon {
  display: grid; place-items: center; background: linear-gradient(color-mix(in srgb, var(--tint) 70%, #fff), var(--tint));
  mask: url(/squircle.svg) center / 100% 100%; -webkit-mask: url(/squircle.svg) center / 100% 100%;
}
i.icon img { width: 60%; }
/* Always on: a green dot that keeps pulsing, on Ice's icon and over the agent's day. */
.live { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--live); animation: live 2s ease-out infinite; }
@keyframes live { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); } to { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .live { animation: none; } }
.on { color: var(--good); }
/* The agent's day: a bar filling from morning to night over what it did. */
.clock { display: block; height: 6px; border-radius: 3px; background: var(--tile); overflow: hidden; }
.clock i { display: block; height: 100%; background: linear-gradient(90deg, #f6b65b, var(--accent), var(--frost)); transform-origin: left; }
.cover {
  height: 7em; border-radius: var(--radius); padding: var(--gap) 20px; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; background: radial-gradient(80% 90% at 75% 20%, #f2a7b8, transparent 60%), linear-gradient(160deg, #5aa8ee, #2e2f7f);
}
.cover p { font-size: var(--title); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.cover span { font-weight: 600; opacity: 0.85; }
.chips { display: flex; gap: var(--gap-s); flex-wrap: wrap; margin-top: var(--gap-s); }
.chips span {
  padding: 4px 12px; border-radius: 999px; font-weight: 700;
  background: color-mix(in srgb, var(--tint) 16%, var(--surface)); color: var(--tint);
}

/* Documents: the legal pages and the waiting list's pages. */
.document { max-width: 760px; padding: clamp(48px, 8vw, 96px) 0 72px; }
.document h1 { font-size: var(--title); max-width: none; margin: 0 0 8px; }
.document h2 { font-size: var(--large); line-height: 1.3; margin: 36px 0 8px; }
.document p { overflow-wrap: anywhere; margin-bottom: 12px; }
.document .updated { color: var(--muted); }
.document form { margin-top: 24px; }

.site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 24px; padding-bottom: 40px; font-size: var(--small); color: var(--muted); }

@media (max-width: 760px) {
  .scene { grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
}