* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --text: #111;
  --text-secondary: #555;
  --bg: #fafaf8;
  --card: #fff;
  --border: #e5e5e3;
  --placeholder: #e8e8e4;
  --placeholder-hi: #f1f1ec;
  --accent: #2a6ef5;
  --theme-accent: #0a94f5;
  --theme-bg: #ededf0;
  --page-bg: color-mix(in srgb, var(--theme-bg) 50%, #fff);
  --hero-blend-mode: hue;
  --heading-color: color-mix(in srgb, var(--theme-accent) 30%, #0a0a0a);
  --body-color: color-mix(in srgb, var(--theme-accent) 22%, #4a4a4a);
  --font-heading:
    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:
    "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font: var(--font-body);
  --font-ui:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Arial, sans-serif;
}

/* Responsive tiers used across the page:
       tablet: 900px, mobile: 720px, compact: 520px.
       Use min-width: 721px for desktop/tablet-only inverses. */

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
}
.hero-mac h1,
.hero-mac h2,
.hero-mac h3,
.hero-mac h4 {
  font-family: var(--font-ui);
  font-weight: 700;
}

html {
  scroll-behavior: smooth;
}
html,
body {
  overflow-x: clip;
  max-width: 100%;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--font);
  font-weight: 500;
  color: var(--text);
  background: var(--page-bg);
  transition: background 0.35s ease;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Nav — hidden by default, slides in once the user scrolls past
       the hero download button. Same IntersectionObserver that drives
       the nav CTA toggles the parent visibility. */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(250, 250, 248, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
nav.show-cta {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-logo {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--text);
  letter-spacing: 0;
  text-decoration: none;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
}
.nav-logo img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  margin-right: 10px;
}
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-link:hover {
  color: var(--text);
}
.nav-cta {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--theme-accent);
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    background 0.25s ease;
}
nav.show-cta .nav-cta {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

header {
  padding: 96px 0 0;
  text-align: center;
  display: flex;
  flex-direction: column; /* important */
  justify-content: center; /* vertical centering */
  align-items: center;
  /* height: 100vh; */
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.2) 100%
    ),
    linear-gradient(var(--theme-accent), var(--theme-accent)),
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
    url("../backgrounds/bg-hero.jpg") center/cover no-repeat;
  background-blend-mode: normal, var(--hero-blend-mode), normal, normal;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  transition: background 0.35s ease;
}
.hero-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.hero-orb-canvas {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.hero-copy {
  margin: 0 auto;
  padding: 0 24px;
}
header h1 {
  font-size: 76px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin-bottom: 18px;
  color: var(--heading-color);
  transition: color 0.3s ease;
  max-width: 960px;
}
.hero-no-break {
  white-space: nowrap;
}
header .subtitle {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 500;
  color: var(--body-color);
  opacity: 0.8;
  max-width: 570px;
  margin: 0 auto 28px;
  text-wrap: pretty;
  transition: color 0.3s ease;
}
.cta-button {
  display: inline-block;
  padding: 13px 28px;
  margin-bottom: 64px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--theme-accent);
  border-radius: 999px;
  text-decoration: none;
  transition:
    transform 0.15s,
    opacity 0.15s,
    background 0.25s ease;
}
.cta-button:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}
.dl-modal .cta-button {
  margin-bottom: 0;
}
.cta-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 64px;
}
.cta-stack .cta-button {
  margin-bottom: 0;
}
#hero-cta {
  position: relative;
  overflow: hidden;
  padding: 18px 42px;
  font-size: 18px;
  line-height: 1.15;
  background-image: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.16) 49%,
    rgba(255, 255, 255, 0.28) 52%,
    transparent 66%
  );
  background-size: 240% 100%;
  background-position: -170% 0;
  animation:
    hero-cta-bounce 6.4s ease-in-out infinite,
    hero-cta-shimmer 6.4s ease-in-out infinite;
}
@keyframes hero-cta-bounce {
  0%,
  70%,
  100% {
    translate: 0 0;
  }
  74% {
    translate: 0 -3px;
  }
  79% {
    translate: 0 0;
  }
  84% {
    translate: 0 -1px;
  }
  89% {
    translate: 0 0;
  }
}
@keyframes hero-cta-shimmer {
  0%,
  70% {
    background-position: -170% 0;
  }
  89% {
    background-position: 170% 0;
  }
  100% {
    background-position: 170% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #hero-cta {
    animation: none;
  }
}

/* Hero surface: macOS Patina chat mockup below the CTA. */

.hero-wrapper {
  --hero-device-visible-height: clamp(430px, min(58vw, 76dvh), 680px);
  --hero-device-frame-height: min(
    740px,
    calc(var(--hero-device-visible-height) + 60px)
  );
  width: 100%;
  height: var(--hero-device-visible-height);
}

.hero-surface {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero-surface-inner {
  --device-frame-radius: 28px;
  --device-content-radius: calc(var(--device-frame-radius) - 6px);
  background: color-mix(
    in srgb,
    color-mix(in srgb, #fff 70%, var(--theme-bg)) 45%,
    transparent
  );
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  border-radius: var(--device-frame-radius);
  /* border-top-right-radius: 20px; */
  height: var(--hero-device-frame-height, 740px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background 0.35s ease;
  /* The hero <header> sets text-align: center; the chat UI needs
         normal left alignment for body text inside it. */
  text-align: left;
}

/* --- Mac chat mockup --- */
.hero-mac {
  position: relative;
  --hero-mac-content-max: 640px;
  font-family: var(--font-ui);
}
.hero-mac-window-controls {
  position: absolute;
  /* Traffic lights and the sidebar toggle share this 28px row.
         Top: 12 + (28-12)/2 = 20px between the frame top edge and the
         traffic light tops, matching the 20px left inset. */
  top: 12px;
  left: 20px;
  /* Width = sidebar inner right (6 workspace pad + 232 sidebar -
         12 sidebar pad-right = 226) + 6 (icon centering offset) - 20
         (left), so the toggle SVG's right edge lines up flush with
         the sidebar's inner right edge. */
  width: 212px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 2;
  transition: width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-mac-window-traffic {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.hero-mac-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.hero-mac-dot.red {
  background: #ff5f57;
}
.hero-mac-dot.yellow {
  background: #febc2e;
}
.hero-mac-dot.green {
  background: #28c840;
}
.hero-mac-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 6px;
  /* Inset on all four sides by default — the sidebar is a card
         that floats inside the window. The hero mac at the top of the
         page is the single exception (overridden below). */
  padding: 6px;
  /* HomeDashboardLayout.dashboardBackground (light) — soft off-white
         so the elevated sidebar + content cards stand against it. */
  background: #f5f5f7;
}
.hero-mac-sidebar {
  width: 232px;
  flex: 0 0 232px;
  box-sizing: border-box;
  /* Top padding clears the 28px window-controls row + 12px top
         offset + ~8px breathing room below the toggle. */
  padding: 50px 12px 12px;
  overflow: hidden;
  /* Elevated/inset card: translucent white-on-window with a soft
         border + shadow to lift it off the dashboard background. */
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--device-content-radius);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 14px 36px rgba(0, 0, 0, 0.12);
  transition:
    width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    flex-basis 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Hero mac (the top-of-page interactive frame): the sidebar runs
       all the way down to the bottom edge of the device frame so the
       chat list visibly clips, mirroring the real macOS app. */

.hero-mac.interactive-mac .hero-mac-sidebar {
  /* padding-bottom: 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0; */
}
.hero-mac-sidebar > * {
  transition:
    opacity 0.16s ease,
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-mac-sidebar-toggle {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(0, 0, 0, 0.66);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hero-mac-sidebar-toggle:hover {
  background: transparent;
  color: rgba(0, 0, 0, 0.92);
}
.hero-mac-sidebar-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}
.hero-mac-plus-button {
  display: none;
}
.hero-mac-sidebar-screen[hidden] {
  display: none;
}
.hero-mac-sidebar-back {
  margin-bottom: 10px;
}
.hero-mac-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.hero-mac-tab {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: left;
}
.hero-mac-tab:focus-visible,
.hero-mac-sidebar-toggle:focus-visible {
  outline: 1px solid rgba(0, 0, 0, 0.28);
  outline-offset: -1px;
}
.hero-mac-tab:disabled {
  opacity: 0.5;
  cursor: default;
}
.hero-mac-tab.active {
  background: transparent;
  color: var(--text);
  box-shadow: none;
}
.hero-mac-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.hero-mac-sidebar-file-tree {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.72);
}
.hero-mac-sidebar-file-tree .files-row {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 7px;
}
.hero-mac-sidebar-file-tree .files-children {
  padding-left: 14px;
}
.hero-mac-sidebar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 7px;
  color: rgba(0, 0, 0, 0.72);
  font-size: 13px;
  line-height: 1.2;
}
.hero-mac-sidebar-row.active {
  background: rgba(0, 0, 0, 0.08);
  color: #111;
}
.hero-mac-sidebar-row:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #111;
}
.hero-mac-sidebar-row span:first-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-mac-sidebar-time {
  color: rgba(0, 0, 0, 0.42);
  font-size: 11px;
}

.hero-mac-sidebar-more {
  color: rgba(0, 0, 0, 0.42);
}
/* Top-level menu rows for the new macOS sidebar layout (Home,
       Search, Chat, Files). Mirrors MacSidebarHomeView in the Patina
       app: row chrome at MacSidebarLayout.menuLeadingInset (4) +
       rowHorizontalPadding (10) so labels start ~14px from the
       sidebar edge, with rowCornerRadius 6 and a black-3% selection
       wash matching Color.patinaSelectionBackground. */
.hero-mac-menu {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 6px;
}
.hero-mac-menu-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.hero-mac-menu-row:hover {
  background: rgba(0, 0, 0, 0.05);
}
.hero-mac-menu-row.active {
  background: rgba(0, 0, 0, 0.06);
}
.hero-mac-menu-row:focus-visible {
  outline: 1px solid rgba(0, 0, 0, 0.28);
  outline-offset: -1px;
}
.hero-mac-menu-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: rgba(0, 0, 0, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-mac-menu-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-mac-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* CommandShortcutHint: ⌘K / ⌘N hint on the right of Search/Chat. */
.hero-mac-menu-shortcut {
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.42);
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}
/* Inline section header — matches MacSidebarHomeView.sectionTitle:
       SidebarTypography.rowFont (13px), secondary color, leading inset
       lines up with the menu icon column. */
.hero-mac-section-title {
  margin-top: 12px;
  padding: 4px 10px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
}
.hero-mac.sidebar-collapsed .hero-mac-sidebar {
  width: 0;
  flex-basis: 0;
  padding: 38px 0 8px;
  box-shadow: none;
}
.hero-mac.sidebar-collapsed .hero-mac-window-controls {
  width: 88px;
  justify-content: flex-start;
}
.hero-mac.sidebar-collapsed .hero-mac-sidebar > * {
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}
.hero-mac.sidebar-collapsed .hero-mac-files-sidebar {
  display: none;
}
.hero-mac-chat {
  padding: 0 20px;
  /* Inherit the workspace dashboard wash; no separate panel. */
  background: transparent;
  overflow: hidden;
  position: relative;
  transition: border-radius 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-mac-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 52px 0 8px;
  width: 100%;
  max-width: var(--hero-mac-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: none;
  box-sizing: border-box;
}
.hero-mac-messages::-webkit-scrollbar {
  display: none;
}

.hero-mac [hidden] {
  display: none !important;
}

.hero-mac-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.hero-mac-greeting {
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0;
  margin-bottom: 4px;
}
.hero-mac-suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: var(--hero-mac-content-max);
  margin: 0 auto;
  padding: 12px 0 16px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.hero-mac-bubble {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  letter-spacing: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
  animation: hero-bubble-glow 4.5s ease-in-out infinite;
}
.hero-mac-suggestions .hero-mac-bubble:nth-child(1) {
  animation-delay: 0s;
}
.hero-mac-suggestions .hero-mac-bubble:nth-child(2) {
  animation-delay: 0.25s;
}
.hero-mac-suggestions .hero-mac-bubble:nth-child(3) {
  animation-delay: 0.5s;
}
.hero-mac-suggestions .hero-mac-bubble:nth-child(4) {
  animation-delay: 0.75s;
}
.hero-mac-suggestions .hero-mac-bubble:nth-child(5) {
  animation-delay: 1s;
}
@keyframes hero-bubble-glow {
  0%,
  28%,
  100% {
    box-shadow: 0 0 0 0 transparent;
    border-color: rgba(0, 0, 0, 0.14);
  }
  12% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--theme-accent) 10%, transparent),
      0 0 10px color-mix(in srgb, var(--theme-accent) 16%, transparent);
    border-color: color-mix(
      in srgb,
      var(--theme-accent) 22%,
      rgba(0, 0, 0, 0.14)
    );
  }
}
.hero-mac-bubble:hover {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--theme-accent) 14%, transparent),
    0 0 12px color-mix(in srgb, var(--theme-accent) 22%, transparent);
  border-color: color-mix(
    in srgb,
    var(--theme-accent) 30%,
    rgba(0, 0, 0, 0.14)
  );
  animation: none;
}
.hero-mac-suggestions:has(.hero-mac-bubble:hover) .hero-mac-bubble:not(:hover) {
  animation: none;
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .hero-mac-bubble {
    animation: none;
  }
}

/* ----- Home dashboard view ------------------------------------- */
/* Mirrors HomeDashboardView in Patina/Views/Home/HomeDashboardView.swift:
       big page-title clock, date subtitle, prompt suggestion dock,
       2x2 widget grid (Weather, Up Next, On Your Plate, Recent
       Activity). Styling pulls from HomeDashboardLayout +
       HomeDashboardTypography. */
.hero-mac-home {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* Inherit the workspace dashboard wash so the white widget cards
         pop against the off-white background — matches the macOS app
         where HomeDashboardView sits directly on dashboardBackground. */
  background: transparent;
  box-shadow: none;
  position: relative;
}
.hero-mac-home::-webkit-scrollbar {
  display: none;
}
.hero-mac-home-inner {
  width: 100%;
  max-width: 1040px; /* HomeDashboardLayout.dashboardMaxWidth */
  margin: 0 auto;
  padding: 48px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Detail-pane toolbar: back / forward on the left, refresh on
       the right. Sits in the window's top chrome row alongside the
       traffic lights and the sidebar toggle so all four controls
       share one horizontal baseline. The left edge animates with the
       sidebar so the chevrons sit just past the toggle when the
       sidebar collapses, matching the macOS app. */
.hero-mac-detail-toolbar {
  position: absolute;
  /* Same row top as window-controls so chevrons and refresh share
         a vertical center with the traffic lights and sidebar toggle. */
  top: 12px;
  /* Sidebar default: 6 (workspace pad) + 232 (sidebar) + 6 (gap)
         = 244 from window edge, plus 10px extra control inset. */
  left: 254px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 3;
  transition: left 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-mac.sidebar-collapsed .hero-mac-detail-toolbar {
  /* Right after the collapsed window-controls (20 + 88 + 10 gap). */
  left: 118px;
}
.hero-mac-detail-toolbar .spacer {
  flex: 1;
}
.hero-mac-toolbar-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hero-mac-toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
}
.hero-mac-toolbar-btn:disabled {
  color: rgba(0, 0, 0, 0.22);
  cursor: default;
}
.hero-mac-toolbar-btn:disabled:hover {
  background: transparent;
}
.hero-mac-toolbar-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-mac-home-pills {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0 6px;
  margin: 6px 0 0;
}
.hero-mac-home-pills.is-overflowing {
  /* Fade only the trailing edge so users see there's more to
         scroll into. */
  mask-image: linear-gradient(
    to right,
    black 0,
    black calc(100% - 28px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    black 0,
    black calc(100% - 28px),
    transparent 100%
  );
}
.hero-mac-home-pills::-webkit-scrollbar {
  display: none;
}
.hero-mac-home-pill {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: #fff;
  border-radius: 999px;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  letter-spacing: 0;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.hero-mac-home-pill:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.1),
    0 2px 5px rgba(0, 0, 0, 0.08);
}
.hero-mac-home-pill:focus-visible {
  outline: 1px solid rgba(0, 0, 0, 0.28);
  outline-offset: 2px;
}
.hero-mac-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; /* HomeDashboardLayout.dashboardColumnSpacing */
}
.hero-mac-home-grid .hero-mac-widget {
  grid-column: span 2;
}
.hero-mac-home-grid .hero-mac-today-widget {
  grid-column: span 4;
}
/* On narrow viewports the content panel can't fit two widgets
       side-by-side; stack vertically — matches the macOS app, where
       ViewThatFits flips the home widgets to a single column when
       the dashboard width drops below 2 * widgetMinWidth + spacing. */
@media (max-width: 720px) {
  .hero-mac-home-grid {
    grid-template-columns: 1fr;
  }
  .hero-mac-home-grid .hero-mac-widget,
  .hero-mac-home-grid .hero-mac-today-widget {
    grid-column: span 1;
  }
}
.hero-mac-widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: #fff;
  border-radius: 18px; /* shrunk from 24 since the panel is smaller */
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.04);
}
.hero-mac-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-mac-widget-header svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.hero-mac-widget-header .chev {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.34);
}
.hero-mac-today-copy {
  display: grid;
  gap: 8px;
  font-size: 13px;
  line-height: 1.48;
  color: rgba(0, 0, 0, 0.74);
}
.hero-mac-today-copy strong {
  color: var(--text);
  font-weight: 700;
}

/* Weather widget */
.hero-mac-weather-temp {
  align-self: flex-start;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1;
}
[data-weather-toggle] {
  cursor: pointer;
  user-select: none;
}
[data-weather-toggle]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-accent) 48%, transparent);
  outline-offset: 3px;
}

/* Up Next widget */
.hero-mac-upnext {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  align-items: start;
  font-size: 13px;
}
.hero-mac-upnext-day {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 1.32;
  /* Nudge so "Today" baseline lines up with the first event's
         title (the title is 13px @ 1.32; "Today" is 12px @ 1.32, so a
         1-2px push down aligns the cap-heights). */
  padding-top: 1px;
}
.hero-mac-upnext-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-mac-upnext-event {
  position: relative;
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 10px;
  align-items: stretch;
  border-radius: 10px;
  isolation: isolate;
}
.hero-mac-upnext-event::before {
  content: "";
  position: absolute;
  inset: -4px -8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.035);
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 0;
}
.hero-mac-upnext-event:hover::before,
.hero-mac-upnext-event:focus-within::before {
  opacity: 1;
}
.hero-mac-upnext-bar {
  position: relative;
  z-index: 1;
  width: 3px;
  border-radius: 2px;
  background: #b0b0b0;
}
.hero-mac-upnext-event > div:not(.hero-mac-upnext-bar) {
  position: relative;
  z-index: 1;
}
.hero-mac-upnext-event.calendar-personal .hero-mac-upnext-bar {
  background: #f4b942;
}

.hero-mac-upnext-title {
  color: var(--text);
  line-height: 1.32;
}
.hero-mac-upnext-time {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  margin-top: 1px;
}

/* On Your Plate widget */
.hero-mac-plate {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.hero-mac-plate-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  font: inherit;
  line-height: 1.4;
  text-align: left;
  transition:
    color 160ms ease,
    transform 120ms ease;
}
.hero-mac-plate-item:active {
  transform: scale(0.99);
}
.hero-mac-plate-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-accent) 48%, transparent);
  outline-offset: 3px;
}
.hero-mac-plate-check {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 4px;
  margin-top: 2px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.hero-mac-plate-check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 6px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: translate(-50%, -58%) rotate(45deg) scale(0.7);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}
.hero-mac-plate-label {
  transition:
    color 160ms ease,
    text-decoration-color 160ms ease;
}
.hero-mac-plate-item.is-checked .hero-mac-plate-check {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  box-shadow: 0 5px 14px
    color-mix(in srgb, var(--theme-accent) 28%, transparent);
}
.hero-mac-plate-item.is-checked .hero-mac-plate-check::after {
  opacity: 1;
  transform: translate(-50%, -58%) rotate(45deg) scale(1);
}
.hero-mac-plate-item.is-checked .hero-mac-plate-label {
  color: rgba(0, 0, 0, 0.48);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 0, 0, 0.34);
}
/* Recent Activity widget */

.hero-mac-activity-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  line-height: 1.4;
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.hero-mac-activity-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
}
.hero-mac-activity-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
  pointer-events: none;
}
.hero-mac-activity-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Hero dashboard refresh */
.hero-wrapper {
  --hero-device-visible-height: clamp(620px, min(68vw, 90dvh), 860px);
  --hero-device-frame-height: min(
    920px,
    calc(var(--hero-device-visible-height) + 54px)
  );
}
.hero-surface {
  max-width: 1588px;
  padding: 0 clamp(20px, 3vw, 48px);
}
.hero-surface-inner.interactive-mac {
  background: #f4f4f6;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.hero-mac.interactive-mac {
  --hero-mac-content-max: 980px;
}
.hero-mac.interactive-mac .hero-mac-workspace {
  gap: 0;
  padding: 0;
  background: #f4f4f6;
}
.hero-mac.interactive-mac .hero-mac-window-controls {
  left: 20px;
  width: 260px;
  z-index: 5;
}
.hero-mac.interactive-mac .hero-mac-detail-toolbar {
  left: 312px;
  right: 22px;
  top: 12px;
  z-index: 5;
}
.hero-mac.interactive-mac .hero-mac-toolbar-btn {
  color: rgba(0, 0, 0, 0.38);
}
.hero-mac.interactive-mac .hero-mac-toolbar-btn:not(:disabled) {
  color: rgba(0, 0, 0, 0.54);
}
.hero-mac.interactive-mac:has(.hero-mac-new-chat-view:not([hidden]))
  .hero-mac-toolbar-btn[aria-label="Display options"] {
  display: none;
}
.hero-mac.interactive-mac:has(.hero-mac-journal-page:not([hidden]))
  .hero-mac-toolbar-btn[aria-label="Display options"] {
  display: none;
}
.hero-mac.interactive-mac:has(.hero-mac-people-page:not([hidden]))
  .hero-mac-toolbar-btn[aria-label="Display options"] {
  display: none;
}
.hero-mac.interactive-mac:has(.hero-mac-files-index:not([hidden]))
  .hero-mac-toolbar-btn[aria-label="Display options"] {
  display: none;
}
.hero-mac.interactive-mac .hero-mac-sidebar {
  width: 286px;
  flex-basis: 286px;
  padding: 70px 18px 16px;
  border-radius: 0;
  background: rgba(248, 248, 250, 0.92);
  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-mac.interactive-mac.sidebar-collapsed .hero-mac-sidebar {
  width: 0;
  flex-basis: 0;
  padding: 70px 0 16px;
  box-shadow: none;
}
.hero-mac.interactive-mac.sidebar-collapsed .hero-mac-window-controls {
  width: 88px;
  justify-content: flex-start;
}
.hero-mac.interactive-mac.sidebar-collapsed .hero-mac-detail-toolbar {
  left: 118px;
}
.hero-mac-sidebar-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  margin-bottom: 18px;
}
.hero-mac-compose-row {
  background: rgba(0, 0, 0, 0.05);
}
.hero-mac-search-row {
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.05);
}
.hero-mac-compose-divider {
  width: 1px;
  height: 18px;
  background: rgba(0, 0, 0, 0.1);
  margin-left: auto;
}
.hero-mac-menu-chevron {
  color: rgba(0, 0, 0, 0.46);
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}
.hero-mac-menu-chevron svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-mac-sidebar-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #1478ff;
  justify-self: end;
}
.hero-mac.interactive-mac .hero-mac-section-title {
  margin-top: 22px;
  color: rgba(0, 0, 0, 0.48);
}
.hero-mac.interactive-mac .hero-mac-home-inner {
  width: min(100%, 980px);
  max-width: 980px;
  padding: 86px 36px 42px;
  gap: 8px;
}
.hero-mac.interactive-mac .hero-mac-home-pills {
  margin: 0;
  padding: 8px 0;
  gap: 10px;
}
.hero-mac.interactive-mac .hero-mac-home-pill {
  height: 48px;
  padding: 0 18px;
  border-radius: 22px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 3px 8px rgba(0, 0, 0, 0.035);
}
.hero-mac.interactive-mac .hero-mac-home-pill.muted {
  color: rgba(0, 0, 0, 0.5);
}
.hero-mac.interactive-mac .hero-mac-home-grid {
  grid-template-columns: 1fr 1fr 2.08fr;
  gap: 16px;
  align-items: stretch;
}
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-widget {
  grid-column: auto;
}
.hero-mac.interactive-mac .hero-mac-widget {
  min-height: 156px;
  padding: 20px;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.045),
    0 10px 28px rgba(0, 0, 0, 0.055);
}
.hero-mac.interactive-mac .hero-mac-widget-header {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: #8a929b;
}
.hero-mac.interactive-mac .hero-mac-widget-header .chev {
  margin-left: 2px;
  font-size: 19px;
  line-height: 1;
}
.hero-mac.interactive-mac .hero-mac-widget-header .chev:first-of-type {
  margin-left: auto;
}
.hero-mac.interactive-mac .hero-mac-widget-header .chev.muted {
  color: rgba(0, 0, 0, 0.16);
}
.hero-mac.interactive-mac
  .hero-mac-meeting-widget
  .hero-mac-widget-header
  .chev.muted {
  margin-left: auto;
}
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-date-widget,
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-weather-widget {
  aspect-ratio: 1 / 1;
  align-self: start;
  min-height: 0;
}
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-today-widget {
  grid-column: span 1;
  min-height: 0;
}
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-meeting-widget,
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-upnext-widget,
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-people-widget,
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-todo-widget {
  grid-column: span 1;
  min-height: 172px;
}
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-meeting-widget,
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-people-widget {
  grid-column: 1 / span 2;
}
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-upnext-widget,
.hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-todo-widget {
  grid-column: 3;
}
.hero-mac-date-card {
  flex: 1;
  min-height: 170px;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.hero-mac-date-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-mac-date-stack span {
  color: #ff4052;
  font-size: 28px;
  font-weight: 850;
  line-height: 1;
}
.hero-mac-date-stack strong {
  color: #0d1b2a;
  font-size: 86px;
  font-weight: 760;
  line-height: 0.9;
}
.hero-mac.interactive-mac .hero-mac-weather-temp {
  font-size: 48px;
  font-weight: 780;
  margin-top: 10px;
}
.hero-mac-weather-meta {
  margin-top: auto;
  display: grid;
  gap: 8px;
  font-size: 13px;
}
.hero-mac-weather-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.hero-mac-weather-meta span {
  color: rgba(0, 0, 0, 0.5);
}
.hero-mac-weather-meta strong {
  color: #0d1b2a;
  font-weight: 750;
}
@media (max-width: 1399px) and (min-width: 521px) {
  .hero-mac.interactive-mac .hero-mac-sidebar {
    display: none;
  }
  .hero-mac.interactive-mac .hero-mac-window-controls {
    width: auto;
    justify-content: flex-start;
  }
  .hero-mac.interactive-mac .hero-mac-sidebar-toggle {
    display: none;
  }
  .hero-mac.interactive-mac .hero-mac-detail-toolbar {
    left: 112px;
  }
  .hero-mac.interactive-mac .hero-mac-home-inner {
    width: min(100%, 1080px);
    max-width: 100%;
    margin: 0 auto;
    padding-left: 36px;
    padding-right: 36px;
  }
  .hero-mac.interactive-mac .hero-mac-home-grid {
    grid-template-columns: 1fr 1fr 2.08fr;
  }
}
@media (min-width: 521px) {
  .hero-mac.interactive-mac .hero-mac-home-pills {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 42px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 42px),
      transparent 100%
    );
  }
  .hero-mac.interactive-mac .hero-mac-home-pill {
    flex: 0 0 auto;
    max-width: min(240px, 52vw);
  }
}
@media (max-width: 900px) and (min-width: 521px) {
  .hero-mac.interactive-mac .hero-mac-home-inner {
    width: 100%;
    padding-left: clamp(24px, 6vw, 36px);
    padding-right: clamp(24px, 6vw, 36px);
  }
  .hero-mac.interactive-mac .hero-mac-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .hero-mac.interactive-mac .hero-mac-home-inner {
    gap: 12px;
  }
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-today-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-meeting-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-upnext-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-people-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-todo-widget {
    grid-column: 1 / -1;
  }
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-date-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-weather-widget {
    grid-column: span 1;
  }
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-today-widget {
    min-height: 0;
  }
}
.hero-mac.interactive-mac .hero-mac-today-copy {
  display: block;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #142032;
}
.hero-mac.interactive-mac .hero-mac-today-copy strong {
  font-weight: 800;
}
.hero-mac-meeting-card {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 0 12px;
  align-items: start;
  margin-top: 4px;
  color: #65707b;
  font-size: 14px;
  line-height: 1.35;
}
.hero-mac-meeting-bar {
  grid-row: 1 / span 2;
  width: 3px;
  min-height: 42px;
  margin-top: 3px;
  border-radius: 2px;
  background: #f2b233;
}
.hero-mac-meeting-card h3 {
  margin: 0;
  color: #101827;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.25;
}
.hero-mac-meeting-card p {
  margin: 0;
}
.hero-mac-meeting-time {
  color: #65707b;
  font-size: 14px;
  margin-top: 2px !important;
}
.hero-mac-meeting-card > p:last-child {
  grid-column: 1 / -1;
  margin-top: 8px;
}
.hero-mac-meeting-card strong {
  font-weight: 800;
}
.hero-mac.interactive-mac .hero-mac-upnext {
  grid-template-columns: 84px 1fr;
  gap: 14px;
  margin-top: 8px;
  font-size: 14px;
}
.hero-mac.interactive-mac .hero-mac-upnext-day {
  font-size: 13px;
}
.hero-mac.interactive-mac .hero-mac-upnext-title {
  font-weight: 650;
}
.hero-mac-upnext-event.calendar-school .hero-mac-upnext-bar {
  background: #9b6cff;
}
.hero-mac-people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 24px;
  padding: 8px 12px 0;
}
.hero-mac-people-grid div {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #101827;
  font-size: 12px;
  font-weight: 650;
}
.hero-mac-people-grid img {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.hero-mac.interactive-mac .hero-mac-plate {
  gap: 10px;
  margin-top: 8px;
  font-size: 14px;
}
.hero-mac.interactive-mac .hero-mac-plate-item {
  grid-template-columns: 16px 1fr;
  gap: 10px;
}
.hero-mac.interactive-mac .hero-mac-new-chat-view {
  background: #fff;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.hero-mac-new-chat-stage {
  width: min(720px, calc(100% - 96px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transform: translateY(10px);
}
.hero-mac.interactive-mac .hero-mac-new-chat-view.has-active-chat {
  justify-content: flex-start;
}
.hero-mac.interactive-mac
  .hero-mac-new-chat-view.has-active-chat
  .hero-mac-new-chat-stage {
  padding-top: 76px;
  transform: none;
}
.hero-mac.interactive-mac .hero-mac-new-chat-view .hero-mac-messages {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  overflow: visible;
}
.hero-mac.interactive-mac .hero-mac-new-chat-view .hero-mac-intro {
  align-items: stretch;
  gap: 22px;
}
.hero-mac.interactive-mac .hero-mac-new-chat-view .hero-mac-greeting {
  text-align: center;
  font-size: 28px;
  font-weight: 760;
  letter-spacing: 0;
  color: #101827;
  line-height: 1.1;
  margin: 0;
}
.hero-mac.interactive-mac .hero-mac-new-chat-input {
  max-width: none;
  min-height: 78px;
  margin: 0;
  padding: 14px 14px 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.08);
  align-items: flex-start;
}
.hero-mac.interactive-mac .hero-mac-new-chat-input .hero-mac-input-field {
  height: 28px;
  font-size: 16px;
  line-height: 28px;
  color: #101827;
}
.hero-mac.interactive-mac
  .hero-mac-new-chat-input
  .hero-mac-input-field::placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.hero-mac.interactive-mac .hero-mac-new-chat-input .hero-mac-send {
  align-self: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  margin: 0;
  background: rgba(0, 0, 0, 0.1);
  font-size: 15px;
  font-weight: 750;
}
.hero-mac.interactive-mac .hero-mac-new-chat-view .hero-mac-suggestions {
  width: 100%;
  max-width: none;
  margin: 30px 0 0;
  padding: 0;
  gap: 0;
  align-items: stretch;
}
.hero-mac.interactive-mac .hero-mac-new-chat-view .hero-mac-bubble {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  justify-content: flex-start;
  text-align: left;
  color: #101827;
  font-size: 14px;
  font-weight: 500;
}
.hero-mac.interactive-mac .hero-mac-new-chat-view .hero-mac-bubble:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.hero-mac.interactive-mac .hero-mac-new-chat-view .hero-mac-bubble:hover {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: none;
  transform: none;
}

.hero-mac-input {
  width: 100%;
  max-width: var(--hero-mac-content-max);
  margin: 10px auto 18px;
  padding: 6px 6px 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 22px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.hero-mac-input-field {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
}
.hero-mac-input-field::placeholder {
  color: #8e8e93;
}
.hero-mac-send {
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  margin-right: -2px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  font-family: inherit;
}

/* Chat / Files view containers. Both expand into the remaining
       space below the topbar; whichever is active is shown. */
.hero-mac-view {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hero-mac-view[hidden] {
  display: none;
}
.hero-mac-todo-page {
  background: #fff;
  padding: 78px clamp(32px, 11vw, 176px) 44px;
  overflow-y: auto;
  scrollbar-width: none;
}
.hero-mac-todo-page::-webkit-scrollbar {
  display: none;
}
.hero-mac-todo-page-inner {
  width: min(760px, 100%);
  margin: 0 auto;
}
.hero-mac-todo-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.hero-mac-todo-page h2 {
  margin: 0 0 22px;
  color: #101827;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
.hero-mac-todo-page-filters,
.hero-mac-todo-page-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-mac-todo-page-filter {
  appearance: none;
  -webkit-appearance: none;
  height: 32px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: #f0f1f3;
  color: #101827;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 32px;
}
.hero-mac-todo-page-filter.active {
  background: #1295f5;
  color: #fff;
}
.hero-mac-todo-page-tool {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #101827;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.hero-mac-todo-page-tool:hover {
  background: rgba(0, 0, 0, 0.05);
}
.hero-mac-todo-page-tool svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-mac-todo-page-list {
  display: grid;
  gap: 20px;
}
.hero-mac-todo-page-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #101827;
  cursor: pointer;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  font: inherit;
  text-align: left;
}
.hero-mac-todo-page-item:focus-visible {
  outline: 2px solid rgba(18, 149, 245, 0.42);
  outline-offset: 4px;
  border-radius: 8px;
}
.hero-mac-todo-page-check {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 5px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.12);
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}
.hero-mac-todo-page-check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.75);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}
.hero-mac-todo-page-title {
  display: block;
  color: #101827;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.28;
  transition:
    color 160ms ease,
    text-decoration-color 160ms ease;
}
.hero-mac-todo-page-category {
  display: block;
  margin-top: 4px;
  color: #737d89;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}
.hero-mac-todo-page-item.is-checked .hero-mac-todo-page-check {
  background: #1295f5;
  box-shadow: 0 0 0 1px #1295f5;
}
.hero-mac-todo-page-item.is-checked .hero-mac-todo-page-check::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.hero-mac-todo-page-item.is-checked .hero-mac-todo-page-title {
  color: rgba(16, 24, 39, 0.45);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(16, 24, 39, 0.3);
}
.hero-mac-todo-widget .hero-mac-widget-header[data-open-view="todo"] {
  cursor: pointer;
  border-radius: 8px;
}
.hero-mac-todo-widget
  .hero-mac-widget-header[data-open-view="todo"]:focus-visible {
  outline: 2px solid rgba(18, 149, 245, 0.42);
  outline-offset: 3px;
}
.hero-mac-journal-page {
  position: relative;
  background: #fff;
  padding: 78px clamp(32px, 11vw, 176px) 44px;
  overflow-y: auto;
  scrollbar-width: none;
}
.hero-mac-journal-page::-webkit-scrollbar {
  display: none;
}
.hero-mac-journal-add {
  position: absolute;
  top: 22px;
  right: 28px;
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #101827;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.hero-mac-journal-add:hover {
  background: rgba(0, 0, 0, 0.05);
}
.hero-mac-journal-add:focus-visible {
  outline: 2px solid rgba(18, 149, 245, 0.42);
  outline-offset: 3px;
}
.hero-mac-journal-add svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-mac-journal-inner {
  width: min(760px, 100%);
  margin: 0 auto;
}
.hero-mac-journal-header {
  margin-bottom: 36px;
}
.hero-mac-journal-header h2 {
  margin: 0 0 9px;
  color: #101827;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-align: left;
}
.hero-mac-journal-header p {
  margin: 0;
  color: rgba(16, 24, 39, 0.54);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}
.hero-mac-journal-month {
  margin-top: 40px;
}
.hero-mac-journal-header + .hero-mac-journal-month {
  margin-top: 0;
}
.hero-mac-journal-month h3 {
  margin: 0 0 15px;
  color: #101827;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}
.hero-mac-journal-entry {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 20px;
  padding: 0;
}
.hero-mac-journal-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
  color: #101827;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  text-transform: uppercase;
}
.hero-mac-journal-date span {
  color: rgba(16, 24, 39, 0.8);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.hero-mac-journal-date strong {
  margin-top: 5px;
  color: #101827;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.hero-mac-journal-copy {
  min-width: 0;
  padding: 13px 12px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.hero-mac-journal-copy p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #263241;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.hero-mac-journal-entry.is-selected .hero-mac-journal-copy {
  border-bottom-color: transparent;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.045);
}
.hero-mac-journal-entry:hover .hero-mac-journal-copy {
  border-bottom-color: transparent;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.045);
}
.hero-mac-journal-copy time {
  display: block;
  margin-top: 6px;
  color: rgba(16, 24, 39, 0.48);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.hero-mac-people-page {
  position: relative;
  background: #fff;
  padding: 78px clamp(32px, 11vw, 176px) 44px;
  overflow-y: auto;
  scrollbar-width: none;
}
.hero-mac-people-page::-webkit-scrollbar {
  display: none;
}
.hero-mac-people-toolbar {
  position: absolute;
  top: 14px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 4;
}
.hero-mac-people-search {
  width: 220px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(16, 24, 39, 0.62);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-mac-people-search svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-mac-people-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #101827;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}
.hero-mac-people-search input::placeholder {
  color: rgba(16, 24, 39, 0.5);
}
.hero-mac-people-view-toggle {
  height: 32px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.05);
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.hero-mac-people-tool {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #101827;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.hero-mac-people-tool.active,
.hero-mac-people-tool:hover {
  background: rgba(0, 0, 0, 0.05);
}
.hero-mac-people-view-toggle .hero-mac-people-tool.active {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
.hero-mac-people-view-toggle .hero-mac-people-tool:hover:not(.active) {
  background: rgba(255, 255, 255, 0.58);
}
.hero-mac-people-toolbar > .hero-mac-people-tool {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.hero-mac-people-tool:focus-visible {
  outline: 2px solid rgba(18, 149, 245, 0.42);
  outline-offset: 3px;
}
.hero-mac-people-tool svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-mac-people-inner {
  width: min(760px, 100%);
  margin: 0 auto;
}
.hero-mac-people-header {
  margin-bottom: 34px;
}
.hero-mac-people-header h2 {
  margin: 0 0 8px;
  color: #101827;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-align: left;
}
.hero-mac-people-header p {
  margin: 0;
  color: rgba(16, 24, 39, 0.54);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}
.hero-mac-people-page .hero-mac-people-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(78px, 1fr));
  column-gap: 24px;
  row-gap: 36px;
  padding-bottom: 42px;
}
.hero-mac-person-card {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 112px;
  padding: 8px 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #101827;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font: inherit;
  transition:
    background 140ms ease,
    transform 140ms ease;
}
.hero-mac-person-card:hover {
  background: rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}
.hero-mac-person-card:focus-visible {
  outline: 2px solid rgba(18, 149, 245, 0.42);
  outline-offset: 3px;
}
.hero-mac-person-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  background: #ededee;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  color: #7d858f;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  flex: 0 0 auto;
}
.hero-mac-person-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.hero-mac-person-avatar.initials.warm {
  background: linear-gradient(135deg, #f7c194, #e98f5f);
  color: #fff;
}
.hero-mac-person-avatar.initials.pink {
  background: linear-gradient(135deg, #f0a1ea, #d66bd1);
  color: #fff;
}
.hero-mac-person-avatar.initials.teal {
  background: linear-gradient(135deg, #8cf1ee, #55cdd1);
  color: #0f3440;
}
.hero-mac-person-avatar.initials.dark {
  background: #101827;
  color: #fff;
}
.hero-mac-person-name {
  display: -webkit-box;
  width: 100%;
  margin-top: 8px;
  overflow: hidden;
  color: #101827;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.14;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.hero-mac-person-time {
  margin-top: 4px;
  color: rgba(16, 24, 39, 0.42);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}
.hero-mac-files {
  flex-direction: row;
  background: #fff;
  border-top-left-radius: var(--device-content-radius);
  border-top-right-radius: var(--device-content-radius);
  overflow: hidden;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Files sidebar — a left-rail folder tree. */
.hero-mac-files-sidebar {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(250, 250, 250, 0.96);
  padding: 12px 6px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--text);
  scrollbar-width: none;
}
.hero-surface-inner.interactive-mac .hero-mac-files-sidebar {
  display: none;
}
.hero-surface-inner.interactive-mac .hero-mac-files {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.hero-mac-files-sidebar::-webkit-scrollbar {
  display: none;
}
.files-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.files-row:hover {
  background: rgba(0, 0, 0, 0.04);
}
.files-row.active {
  background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
  color: #111;
}
.files-row .files-chevron {
  width: 10px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.files-row.expanded .files-chevron {
  transform: rotate(90deg);
}
.files-row .files-icon {
  color: var(--theme-accent);
  display: inline-flex;
  transition: color 0.25s ease;
}
.files-row.file .files-icon {
  color: color-mix(in srgb, var(--theme-accent) 70%, #fff);
}
.files-row .files-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.files-children {
  padding-left: 18px;
  overflow: hidden;
}
.files-children[hidden] {
  display: none;
}

/* Right-pane content of the selected file. */
.hero-mac-files-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 52px 40px 32px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  scrollbar-width: none;
}
.hero-mac-files-content::-webkit-scrollbar {
  display: none;
}
.hero-mac-files-content h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 18px;
}
.hero-mac-files-content h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 20px 0 8px;
}
.hero-mac-files-content h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 14px 0 6px;
}
.hero-mac-files-content p {
  margin: 0 0 10px;
}
.hero-mac-files-content ul {
  margin: 0 0 10px;
  padding-left: 22px;
}
.hero-mac-files-content li {
  margin: 3px 0;
}
.hero-mac-files-content a {
  color: var(--theme-accent);
  text-decoration: none;
  transition: color 0.25s ease;
}
.hero-mac-files-back {
  display: none;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: #2a6ef5;
  padding: 4px 8px;
  margin: -4px 0 8px -8px;
  cursor: pointer;
  border-radius: 8px;
}
.hero-mac-files-back:hover {
  background: rgba(0, 0, 0, 0.04);
}
@media (max-width: 520px) {
  .hero-mac-files {
    position: relative;
  }
  .hero-mac-files-sidebar {
    width: 100%;
    border-right: none;
    padding: 10px 10px;
  }
  .hero-mac-files-content {
    display: none;
    padding: 68px 20px 20px;
  }
  .hero-mac-files.showing-file .hero-mac-files-sidebar {
    display: none;
  }
  .hero-mac-files.showing-file .hero-mac-files-content {
    display: block;
  }
  .hero-mac-files.showing-file .hero-mac-files-back {
    display: inline-flex;
  }
  .hero-mac-files-content h1 {
    font-size: 20px;
  }
}
.hero-mac-files-index {
  position: relative;
  flex-direction: column;
  background: #fff;
  box-shadow: none;
}
.hero-surface-inner.interactive-mac .hero-mac-files-index {
  background: #fff;
  border-radius: 0;
}
.hero-mac-files-index .hero-mac-files-toolbar {
  position: absolute;
  top: 14px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 4;
}
.hero-mac-files-search {
  width: 220px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(16, 24, 39, 0.62);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-mac-files-search svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-mac-files-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #101827;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}
.hero-mac-files-search input::placeholder {
  color: rgba(16, 24, 39, 0.5);
}
.hero-mac-files-view-toggle {
  height: 32px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.05);
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.hero-mac-files-tool {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #101827;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.hero-mac-files-tool.active,
.hero-mac-files-tool:hover {
  background: rgba(0, 0, 0, 0.05);
}
.hero-mac-files-view-toggle .hero-mac-files-tool.active {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
.hero-mac-files-view-toggle .hero-mac-files-tool:hover:not(.active) {
  background: rgba(255, 255, 255, 0.58);
}
.hero-mac-files-toolbar > .hero-mac-files-tool {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.hero-mac-files-tool:focus-visible {
  outline: 2px solid rgba(18, 149, 245, 0.42);
  outline-offset: 3px;
}
.hero-mac-files-tool svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-mac-files-index .hero-mac-files-content {
  flex: 1;
  min-height: 0;
  padding: 78px clamp(32px, 11vw, 176px) 44px;
  overflow-y: auto;
  scrollbar-width: none;
  background: #fff;
}
.hero-mac-files-index .hero-mac-files-content::-webkit-scrollbar {
  display: none;
}
.hero-mac-files-inner {
  width: min(760px, 100%);
  margin: 0 auto;
}
.hero-mac-files-header {
  margin-bottom: 34px;
}
.hero-mac-files-header h2 {
  margin: 0 0 8px;
  color: #101827;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-align: left;
}
.hero-mac-files-header p {
  margin: 0;
  color: rgba(16, 24, 39, 0.54);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}
.hero-mac-files-list {
  display: grid;
  gap: 14px;
  padding-bottom: 30px;
}
.hero-mac-file-row {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 40px;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #101827;
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 10px;
  font: inherit;
  text-align: left;
  transition: background 140ms ease;
}
.hero-mac-file-row:hover {
  background: rgba(0, 0, 0, 0.04);
}
.hero-mac-file-row:focus-visible {
  outline: 2px solid rgba(18, 149, 245, 0.42);
  outline-offset: 3px;
}
.hero-mac-file-icon {
  position: relative;
  width: 30px;
  height: 24px;
  display: block;
  justify-self: center;
}
.hero-mac-file-icon.folder::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 13px;
  height: 6px;
  border-radius: 4px 4px 1px 1px;
  background: #7fb7e8;
}
.hero-mac-file-icon.folder::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 30px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(#9fd0f2, #72aee3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.hero-mac-file-icon.document {
  width: 25px;
  height: 28px;
  border-radius: 4px;
  background: linear-gradient(#fff, #f5f3ee);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.08);
}
.hero-mac-file-icon.document::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, transparent 0 50%, #e7e3da 51%);
  border-top-right-radius: 4px;
}
.hero-mac-file-icon.document::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 13px;
  height: 7px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.hero-mac-file-name {
  min-width: 0;
  overflow: hidden;
  color: #101827;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-mac-file-time {
  color: rgba(16, 24, 39, 0.48);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: right;
}

/* Response scenes inside the Mac mockup reuse the phone-chat
       classes but with desktop sizing. */
.hero-mac .p-msg-user {
  font-size: 15px;
  padding: 10px 16px;
  max-width: 60%;
  letter-spacing: 0;
}
.hero-mac .p-msg-agent {
  font-size: 15px;
  max-width: 85%;
  padding-left: 0;
}
.hero-mac .p-tools {
  padding-left: 0;
  gap: 6px;
}
.hero-mac .p-tool {
  font-size: 13px;
}
.hero-mac .p-tool::before {
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-mac-window-controls,
  .hero-mac-detail-toolbar,
  .hero-mac-sidebar,
  .hero-mac-sidebar > *,
  .hero-mac-view,
  .hero-mac-chat {
    transition: none;
  }
}

@media (max-width: 520px) {
  .hero-wrapper {
    display: block;
    height: clamp(620px, 190vw, 800px);
    margin-top: 22px;
    overflow: hidden;
  }
  .hero-surface {
    max-width: none;
    height: 100%;
    padding: 2px 6px 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  .hero-surface-inner {
    height: calc(100% + 96px);
    min-height: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.12),
      0 18px 44px rgba(0, 0, 0, 0.14);
  }

  .hero-mac-dot {
    width: 9px;
    height: 9px;
  }
  .hero-mac-workspace {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
  }
  .hero-mac-sidebar {
    display: none;
  }
  .hero-mac-window-controls {
    top: 12px;
    left: 20px;
    width: auto;
    height: 28px;
    gap: 6px;
    justify-content: flex-start;
    z-index: 4;
  }
  .hero-mac.sidebar-collapsed .hero-mac-window-controls {
    left: 20px;
    width: auto;
    justify-content: flex-start;
  }
  .hero-mac-detail-toolbar {
    top: 12px;
    left: 112px;
    right: 16px;
    transform: none;
    transition:
      left 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
      right 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .hero-mac.sidebar-collapsed .hero-mac-detail-toolbar {
    left: 112px;
    right: 16px;
    transform: translateX(0);
  }
  .hero-mac-detail-toolbar .hero-mac-toolbar-btn[aria-label="Back"],
  .hero-mac-detail-toolbar .hero-mac-toolbar-btn[aria-label="Forward"] {
    display: none;
  }
  .hero-mac.sidebar-collapsed .hero-mac-sidebar {
    display: none;
  }
  .hero-mac-sidebar-screen,
  .hero-mac-sidebar-list,
  .hero-mac-sidebar-file-tree {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .hero-mac-view {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    transform: none;
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .hero-mac.sidebar-collapsed .hero-mac-view {
    transform: translateX(0);
  }
  .hero-mac-sidebar-toggle {
    display: none;
  }
  .hero-mac.sidebar-collapsed .hero-mac-sidebar-toggle {
    display: none;
  }
  .hero-mac-plus-button {
    display: none;
  }
  .hero-mac-sidebar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 26px;
    padding: 5px 8px;
    font-size: 12px;
  }
  .hero-mac-sidebar-time {
    display: none;
  }
  .hero-mac-menu-row {
    padding: 5px 8px;
    font-size: 12px;
    gap: 7px;
    min-height: 26px;
  }
  .hero-mac-menu-icon {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
  }
  .hero-mac-menu-shortcut {
    display: none;
  }
  .hero-mac-section-title {
    margin-top: 8px;
    padding: 4px 8px;
    font-size: 12px;
  }
  .hero-mac-tab {
    padding: 5px 8px;
    font-size: 12px;
  }
  .hero-mac-sidebar-file-tree,
  .hero-mac-sidebar-file-tree .files-row {
    font-size: 12px;
  }
  .hero-mac-sidebar-file-tree .files-row {
    min-height: 26px;
    padding: 5px 8px;
  }

  .hero-mac-iconbtn {
    width: 24px;
    height: 24px;
  }
  .hero-mac-chat {
    padding: 0 16px;
    border-top-left-radius: 22px;
    border-bottom-left-radius: 0;
  }
  .hero-mac-files {
    border-top-left-radius: 22px;
    border-bottom-left-radius: 0;
  }
  .hero-mac-messages {
    padding: 68px 0 6px;
    gap: 10px;
    overflow-y: auto;
  }
  .hero-mac-files-content {
    padding-top: 68px;
    overflow-y: auto;
  }
  .hero-mac-files-sidebar {
    overflow-y: auto;
  }
  .hero-mac-home {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
  }
  .hero-mac-home-inner {
    gap: 20px;
    padding: 50px 20px 20px;
  }
  .hero-mac.interactive-mac .hero-mac-home-inner {
    gap: 20px;
    padding: 50px 20px 20px;
  }
  .hero-mac-home-pills {
    margin-top: 0;
    padding: 2px 0 2px;
  }
  .hero-mac-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-today-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-meeting-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-upnext-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-people-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-todo-widget {
    grid-column: 1 / -1;
  }
  .hero-mac.interactive-mac .hero-mac-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-date-widget,
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-weather-widget {
    aspect-ratio: 1 / 1;
    grid-column: span 1;
    min-height: 0;
  }
  .hero-mac.interactive-mac .hero-mac-home-grid .hero-mac-today-widget {
    min-height: 0;
  }
  .hero-mac.interactive-mac .hero-mac-widget {
    min-height: 0;
    padding: 20px;
  }
  .hero-mac-date-card {
    min-height: 0;
  }
  .hero-mac-date-stack {
    gap: 8px;
  }
  .hero-mac-date-stack span {
    font-size: 22px;
  }
  .hero-mac-date-stack strong {
    font-size: 68px;
  }
  .hero-mac.interactive-mac .hero-mac-weather-temp {
    font-size: 40px;
  }
  .hero-mac-weather-meta {
    display: none;
  }
  .hero-mac-greeting {
    font-size: 13px;
  }
  .hero-mac-bubble {
    padding: 5px 12px;
    font-size: 11px;
    text-align: left;
  }
  .hero-mac-input {
    width: 100%;
    max-width: none;
    margin: 6px 0 10px;
    min-height: 42px;
    padding: 8px 8px 8px 14px;
  }
  .hero-mac-input-field {
    font-size: 13px;
    line-height: 24px;
    height: 24px;
  }
  .hero-mac-send {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
  }
  .hero-mac .p-msg-user,
  .hero-mac .p-msg-agent {
    font-size: 12px;
  }
  .hero-mac .p-tool {
    font-size: 11px;
  }
}

/* Big-type pitch paragraph that sits between the hero and the
       first themed section — tells the visitor what Patina is in one
       sentence, sized to read like a manifesto rather than a feature
       caption. Inspired by extra.email's below-hero block. */
.hero-pitch {
  margin: 0 auto;
  min-height: 230vh;
  padding: 0 24px;
  text-align: left;
}
.hero-pitch-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 0;
}
/* Pull the section directly below the pitch flush against it,
       no gap between the big-type copy and the folder visual. */
.hero-pitch + section {
  padding-top: 0;
}
.hero-pitch p {
  font-family: var(--font);
  font-size: 50px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--heading-color);
  text-wrap: balance;
  margin: 0 0 28px;
  transition: color 0.3s ease;
}
.hero-pitch p:last-child {
  margin-bottom: 0;
}
/* Inline icon glued to the first word of a marked phrase. The
       .ic-glue wrapper uses `white-space: nowrap` so the icon never
       line-breaks away from its word; the rest of the phrase flows
       normally. Icons inherit text color via currentColor and stay
       at full opacity (the JS ignores SVG element nodes when
       wrapping characters for the scroll reveal). */
.hero-pitch .ic-glue {
  white-space: nowrap;
}
/* Inline icon glued to the first word of a marked phrase. */
.hero-pitch .ic {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.22em;
  vertical-align: -0.1em;
  color: var(--accent);
}
.hero-pitch .ic svg,
.hero-pitch .ic img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-pitch .ic img {
  object-fit: contain;
}
/* 3D-rendered PNG icons (lock, time) carry soft shadows around
       the glyph itself, so they look smaller than the line-art SVGs
       at the same em size. Bump the box to compensate. */
.hero-pitch .ic.ic-photo {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
}
/* Stack of overlapping app icons before "a dozen apps". Width
       grows with the number of icons; each subsequent icon shifts
       left so they overlap by ~50% of their width. iMessage sits
       last in DOM order so the natural paint order puts it on top. */
.hero-pitch .ic-stack {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.18em;
  margin-right: 0.28em;
  height: 1em;
}
.hero-pitch .ic-stack img {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.22em;
  margin-left: -0.25em;
  object-fit: cover;
  /* Outer ring is the page bg, separates overlapping icons.
         box-shadow paints behind the image content, so an `inset`
         shadow gets covered by opaque app logos and would be
         invisible. `outline` paints above the content and follows
         the border-radius in Safari 16+ / current Chrome+Firefox. */
  box-shadow: 0 0 0 2.5px var(--page-bg);
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}
.hero-pitch .ic-stack img:first-child {
  margin-left: 0;
}
/* Slight per-icon rotation so the stack reads as scattered
       rather than perfectly aligned. iMessage (last child, on top)
       gets the smallest tilt so it stays the visual anchor. */
.hero-pitch .ic-stack img:nth-child(1) {
  transform: rotate(-6deg);
}
.hero-pitch .ic-stack img:nth-child(2) {
  transform: rotate(4deg);
}
.hero-pitch .ic-stack img:nth-child(3) {
  transform: rotate(-3deg);
}
.hero-pitch .ic-stack img:nth-child(4) {
  transform: rotate(7deg);
}
.hero-pitch .ic-stack img:nth-child(5) {
  transform: rotate(-2deg);
}
/* Per-character reveal as the section scrolls through the
       sticky lane. JS at the bottom of the page wraps each character
       in a `.char` span; this CSS sets the dimmed initial state and
       keeps `.word` spans unbroken so the reveal doesn't fracture
       wrapping. The JS sets `opacity` directly per character based
       on scroll progress; the transition smooths the per-char step
       so it doesn't strobe at 60fps. */
.hero-pitch .word {
  display: inline-block;
  white-space: nowrap;
}
.hero-pitch .char {
  opacity: 0.18;
  transition: opacity 0.08s linear;
  will-change: opacity;
}
/* Icons inside `.ic-glue` ride the same scroll reveal as the
       characters. They start dimmed + slightly shrunk; the JS sets
       `transform: scale(...)` per scroll frame using easeOutBack,
       so the bounce (brief overshoot past 1.0 around 70% progress,
       settling back) is baked into the value the JS writes. The
       short linear transitions just smooth per-frame jitter. */
.hero-pitch .char-icon {
  opacity: 0.18;
  transform: scale(0.85);
  transform-origin: center center;
  transition:
    opacity 0.08s linear,
    transform 0.1s linear;
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-pitch .char {
    opacity: 1 !important;
    transition: none;
  }
  .hero-pitch .char-icon {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}
@media (max-width: 900px) {
  .hero-pitch {
    min-height: 230vh;
    padding: 0 24px;
  }
  .hero-pitch-sticky {
    padding: 56px 0;
  }
  .hero-pitch p {
    font-size: 38px;
    line-height: 1.34;
    margin-bottom: 24px;
  }
}
@media (max-width: 720px) {
  .hero-pitch {
    min-height: 240vh;
    padding: 0 24px;
  }
  .hero-pitch-sticky {
    padding: 40px 0;
  }
  .hero-pitch p {
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 20px;
  }
}

/* Section layout — Notion style. Heading + lede sit above the
       surface; supporting content lives inside a card below. */
section {
  --section-block-padding: clamp(2vh, 12dvh, 12vh);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-block-padding) 24px;
}
section h2 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.18;
  margin-bottom: 10px;
  max-width: 460px;
  color: var(--heading-color);
  transition: color 0.3s ease;
}

section .lede {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 500;
  color: var(--body-color);
  opacity: 0.8;
  max-width: 520px;
  margin-bottom: 24px;
  text-wrap: pretty;
  letter-spacing: 0;
  transition: color 0.3s ease;
}
@media (max-width: 900px) {
  section h2 {
    font-size: 32px;
  }
  section .lede {
    font-size: 18px;
  }
}

.feature-bento-section {
  max-width: 1200px;
  padding-top: 24px;
}
.feature-bento-header {
  margin-bottom: 32px;
}
.feature-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.feature-bento-card {
  --feature-bg: #fff;
  --feature-shadow-base: color-mix(in srgb, var(--feature-bg) 58%, #000);
  --feature-shadow-ring: color-mix(in srgb, var(--feature-shadow-base) 18%, transparent);
  --feature-shadow-soft: color-mix(in srgb, var(--feature-shadow-base) 14%, transparent);
  --feature-shadow-medium: color-mix(in srgb, var(--feature-shadow-base) 18%, transparent);
  position: relative;
  min-height: 520px;
  border-radius: 34px;
  background: var(--feature-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  box-shadow: none;
}
.feature-bento-card.is-scroll-reveal {
  opacity: 0;
  transform: translateY(56px);
  transition:
    opacity 0.65s ease,
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--feature-reveal-delay, 0ms);
}
.feature-bento-card.is-scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.feature-morning {
  --feature-bg: #e7f6fb;
  --feature-ink: #245d6a;
}
.feature-journal {
  --feature-bg: #f8ece1;
  --feature-ink: #76523b;
}
.feature-todos {
  --feature-bg: #eaf7ee;
  --feature-ink: #2f6a41;
}
.feature-search {
  --feature-bg: #eceaf7;
  --feature-ink: #554f84;
}
.feature-top8 {
  --feature-bg: #edf4ff;
  --feature-ink: #345f96;
}
.feature-reflect {
  --feature-bg: #f6e9f3;
  --feature-ink: #7a4b70;
}
.feature-meeting {
  --feature-bg: #fff1d9;
  --feature-ink: #7b5a23;
}
.feature-private {
  --feature-bg: #e9f3ec;
  --feature-ink: #42694d;
}
.feature-morning {
  order: 1;
}
.feature-todos {
  order: 2;
}
.feature-top8 {
  order: 3;
}
.feature-meeting {
  order: 4;
}
.feature-journal {
  order: 5;
}
.feature-search {
  order: 6;
}
.feature-reflect {
  order: 7;
}
.feature-private {
  order: 8;
}
.feature-card-visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding-bottom: 24px;
  font-family: var(--font-ui);
}
.feature-card-copy {
  margin-top: auto;
  max-width: 520px;
}
.feature-card-copy h3 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.1vw, 31px);
  font-weight: 780;
  line-height: 1.05;
  color: color-mix(in srgb, var(--feature-ink, #111) 88%, #000);
  margin: 0 0 10px;
  text-wrap: nowrap;
}
.feature-card-copy p {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.34;
  color: color-mix(in srgb, var(--feature-ink, #454545) 74%, #525252);
  text-wrap: pretty;
  max-width: 480px;
}

.hero-mac h1,
.hero-mac h2,
.hero-mac h3,
.hero-mac h4,
.hero-mac strong,
.hero-mac b,
.hero-mac .hero-mac-widget-header,
.hero-mac .hero-mac-date-card span,
.hero-mac .hero-mac-date-card strong,
.hero-mac .hero-mac-weather-temp,
.hero-mac .hero-mac-weather-meta strong,
.hero-mac .hero-mac-meeting-card h3,
.hero-mac .hero-mac-upnext-title,
.hero-mac .hero-mac-people-grid div,
.hero-mac .hero-mac-greeting,
.hero-mac .hero-mac-send,
.hero-mac .hero-mac-files-content h1,
.hero-mac .hero-mac-files-content h2,
.hero-mac .hero-mac-files-content h3,
.hero-mac .p-msg-agent strong,
.feature-card-visual h1,
.feature-card-visual h2,
.feature-card-visual h3,
.feature-card-visual h4,
.feature-card-visual strong,
.feature-card-visual b,
.feature-card-visual kbd,
.feature-card-visual button,
.feature-card-visual .feature-morning-header span,
.feature-card-visual .feature-todo-item,
.feature-card-visual .feature-search-bar,
.feature-card-visual .feature-search-input,
.feature-card-visual .feature-search-results strong,
.feature-card-visual .feature-search-results span,
.feature-card-visual .feature-people-header span,
.feature-card-visual .feature-people-header b,
.feature-card-visual .feature-people-grid span,
.feature-card-visual .feature-digest-header span,
.feature-card-visual .feature-digest-section ul,
.feature-card-visual .feature-digest-header p,
.feature-card-visual .feature-meeting-title span,
.feature-card-visual .feature-meeting-description,
.feature-card-visual .feature-private-heading p,
.feature-card-visual .feature-private-row strong,
.feature-card-visual .feature-private-row small,
.bento-visual h1,
.bento-visual h2,
.bento-visual h3,
.bento-visual h4,
.bento-visual strong,
.bento-visual b,
.bento-visual .bento-widget-label span,
.bento-visual .bento-date-widget span,
.bento-visual .bento-date-widget strong,
.bento-visual .bento-imessage-title,
.bento-visual .bento-weather-widget strong,
.bento-visual .bento-weather-widget dl,
.bento-visual .bento-weather-widget div,
.bento-visual .bento-weather-widget dt,
.bento-visual .bento-weather-widget dd {
  font-weight: 600 !important;
}

.feature-morning-widget {
  width: min(470px, 98%);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 16px 40px var(--feature-shadow-soft);
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: rotate(-1.4deg);
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.22s ease;
}
.feature-morning-widget:hover {
  transform: rotate(0deg);
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 18px 44px var(--feature-shadow-medium);
}
.feature-morning-header {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #8a939d;
}
.feature-morning-header svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  flex: 0 0 auto;
}
.feature-morning-header span {
  font-size: 14px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.feature-morning-copy {
  margin: 0;
  color: #111827;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.42;
  text-wrap: pretty;
}
.feature-morning-copy strong {
  font-weight: 850;
}
.feature-journal-page {
  width: min(470px, 98%);
  min-height: 283px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  border: 0;
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 16px 40px var(--feature-shadow-soft);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-journal-page span {
  color: #111;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
}
.feature-journal-entry {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.68);
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  appearance: none;
}
.feature-journal-entry::selection {
  background: color-mix(in srgb, var(--theme-accent) 22%, transparent);
}
.feature-shortcut {
  display: inline-flex;
  gap: 7px;
  margin-top: 22px;
}
.feature-shortcut-key {
  min-width: 38px;
  height: 36px;
  padding: 0 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--feature-shadow-ring);
  box-shadow: inset 0 -3px 0 var(--feature-shadow-ring);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(0);
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}
.feature-shortcut-key kbd {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 750;
  line-height: 1;
  color: rgba(0, 0, 0, 0.72);
}
.feature-shortcut-key:hover {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(0, 0, 0, 0.1);
}
.feature-shortcut-key:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-accent) 58%, #fff);
  outline-offset: 3px;
}
.feature-shortcut-key:active,
.feature-shortcut-key.is-pressed {
  transform: translateY(2px);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: inset 0 -1px 0 var(--feature-shadow-ring);
}
.feature-todo-checklist {
  width: min(420px, 92%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-todo-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 8px 24px var(--feature-shadow-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
  color: rgba(0, 0, 0, 0.72);
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}
.feature-todo-item:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 10px 28px var(--feature-shadow-medium);
}
.feature-todo-item:active {
  transform: scale(0.99);
}
.feature-todo-item:focus-visible {
  outline: 2px solid
    color-mix(in srgb, var(--todo-tint, var(--theme-accent)) 38%, transparent);
  outline-offset: 3px;
}
.feature-todo-check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #fff;
  border: 2px solid
    color-mix(in srgb, var(--todo-tint, var(--theme-accent)) 58%, #cfcfca);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease;
}
.feature-todo-check svg {
  width: 16px;
  height: 16px;
  color: #fff;
  opacity: 0;
  transform: scale(0.55);
  transition:
    opacity 0.16s ease,
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-todo-text {
  position: relative;
  display: inline-block;
  transition: color 0.28s ease;
}
.feature-todo-text::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--todo-tint, var(--theme-accent));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0s linear 0.18s;
}
.feature-todo-item.is-checked .feature-todo-check {
  background: var(--todo-tint, var(--theme-accent));
  border-color: var(--todo-tint, var(--theme-accent));
  box-shadow: 0 6px 18px
    color-mix(in srgb, var(--todo-tint, var(--theme-accent)) 28%, transparent);
  transform: scale(1.05);
}
.feature-todo-item.is-checked .feature-todo-check svg {
  opacity: 1;
  transform: scale(1);
}
.feature-todo-item.is-checked .feature-todo-text {
  color: color-mix(in srgb, var(--todo-tint, var(--theme-accent)) 56%, #9b9b96);
}
.feature-todo-item.is-checked .feature-todo-text::after {
  opacity: 1;
  transform: scaleX(1);
  transition:
    opacity 0s linear,
    transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}
.feature-search-widget {
  width: min(500px, 98%);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 14px 34px var(--feature-shadow-soft);
  padding: 12px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-search-bar {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: #7c858f;
  font-size: 16px;
  font-weight: 650;
}
.feature-search-bar:focus-within {
  color: #66717d;
}
.feature-search-bar svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.feature-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  appearance: none;
}
.feature-search-input::placeholder {
  color: #7c858f;
  opacity: 1;
}
.feature-search-bar kbd,
.feature-search-results kbd {
  border: 0;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.07);
  color: #8a939d;
  padding: 4px 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}
.feature-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.feature-search-results div {
  min-height: 39px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  color: #111827;
  cursor: pointer;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.feature-search-results div.active {
  background: rgba(0, 0, 0, 0.075);
  transform: translateX(2px);
}
.feature-search-results div:hover {
  background: rgba(0, 0, 0, 0.075);
  transform: translateX(2px);
}
.feature-search-results div:active {
  background: rgba(0, 0, 0, 0.095);
  transform: translateX(2px) scale(0.995);
}
.feature-search-results svg {
  width: 18px;
  height: 18px;
  stroke: #7f8892;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.feature-search-results strong {
  flex: 0 0 auto;
  max-width: 150px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature-search-results span {
  flex: 1;
  min-width: 0;
  color: #7c858f;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature-people-widget {
  width: min(470px, 98%);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 14px 34px var(--feature-shadow-soft);
  padding: 22px 24px 28px;
}
.feature-people-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  color: #8a939d;
}
.feature-people-header div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.feature-people-header svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-people-header span,
.feature-people-header b {
  font-size: 14px;
  font-weight: 850;
  text-transform: uppercase;
  color: currentColor;
  letter-spacing: 0.02em;
}
.feature-people-header b {
  font-size: 24px;
  line-height: 1;
  text-transform: none;
}
.feature-people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 14px;
}
.feature-people-grid > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 14px;
  padding: 8px 6px 7px;
  cursor: pointer;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.feature-people-grid > div:hover {
  background: rgba(0, 0, 0, 0.055);
  transform: translateY(-1px);
}
.feature-people-grid > div:active {
  background: rgba(0, 0, 0, 0.075);
  transform: translateY(0);
}
.feature-people-grid img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: #e7e8ea;
  color: #8a8f96;
  font-size: 13px;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px var(--feature-shadow-ring);
}
.feature-people-grid span {
  max-width: 100%;
  color: #111827;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature-people-grid small {
  max-width: 100%;
  color: #8a939d;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature-paper-stack {
  width: min(390px, 94%);
  height: 360px;
  position: relative;
  display: grid;
  place-items: center;
}
.feature-digest-paper {
  position: absolute;
  inset: 14px 0 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  border: 0;
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 16px 40px var(--feature-shadow-soft);
  transform-origin: 50% 86%;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.28s ease;
}
.feature-digest-doc {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transform: translateY(0) rotate(0.8deg);
  z-index: 2;
}
.feature-digest-paper-back {
  z-index: 1;
  background: rgba(255, 255, 255, 0.68);
  transform: translate(-5px, 7px) rotate(-1.4deg);
}
.feature-digest-paper-back::before,
.feature-digest-paper-back::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  box-shadow:
    0 28px 0 rgba(0, 0, 0, 0.045),
    0 56px 0 rgba(0, 0, 0, 0.04);
}
.feature-digest-paper-back::before {
  top: 46px;
}
.feature-digest-paper-back::after {
  top: 162px;
  right: 92px;
}
.feature-reflect:hover .feature-digest-doc {
  transform: translateY(-2px) rotate(1deg);
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 20px 48px var(--feature-shadow-medium);
}
.feature-reflect:hover .feature-digest-paper-back {
  transform: translate(-7px, 9px) rotate(-1.8deg);
}
@media (prefers-reduced-motion: reduce) {
  .feature-digest-paper {
    transition: none;
  }
}
.feature-digest-header span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
}
.feature-digest-header h4 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 25px;
  font-weight: 850;
  line-height: 1.05;
  color: #111;
  letter-spacing: 0;
}
.feature-digest-header p,
.feature-digest-section p {
  margin: 7px 0 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.58);
}
.feature-digest-section {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.feature-digest-section strong {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 850;
  color: rgba(0, 0, 0, 0.82);
}
.feature-digest-section ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(0, 0, 0, 0.62);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.42;
}
.feature-digest-section li {
  margin: 3px 0;
}
.feature-meeting-widget {
  width: min(470px, 98%);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 14px 34px var(--feature-shadow-soft);
  padding: 20px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-meeting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.feature-meeting-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #8a939d;
}
.feature-meeting-title svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-meeting-title span {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: currentColor;
  letter-spacing: 0.02em;
}
.feature-meeting-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8d98a3;
}
.feature-meeting-nav-button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: currentColor;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}
.feature-meeting-nav-button svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-meeting-nav-button:hover {
  background: rgba(0, 0, 0, 0.055);
  color: #66717d;
}
.feature-meeting-nav-button:active {
  transform: scale(0.94);
  background: rgba(0, 0, 0, 0.075);
}
.feature-meeting-nav-button:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.16);
  outline-offset: 2px;
}
.feature-meeting-slides {
  display: block;
  min-height: 0;
}
.feature-meeting-body {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  opacity: 1;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.feature-meeting-body[hidden] {
  display: none;
}
.feature-meeting-body > i {
  width: 3px;
  height: 54px;
  border-radius: 999px;
  background: #f6c243;
}
.feature-meeting-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.feature-meeting-body h4 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.22;
  color: #111827;
  letter-spacing: 0;
}
.feature-meeting-time {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.32;
  color: #66717d;
}
.feature-meeting-description {
  grid-column: 1 / -1;
  margin: 5px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #66717d;
}
.feature-meeting-description strong {
  color: #5d6772;
  font-weight: 800;
}
.feature-meeting-body.secondary > i {
  background: #b7c3d0;
}
.feature-private-widget {
  width: min(470px, 98%);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1px var(--feature-shadow-ring),
    0 16px 40px var(--feature-shadow-soft);
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-private-heading h4 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 850;
  line-height: 1.05;
  color: #111827;
  letter-spacing: 0;
}
.feature-private-heading p {
  margin: 7px 0 0;
  color: #9aa2ab;
  font-size: 13px;
  font-weight: 700;
}
.feature-private-list {
  display: grid;
  gap: 3px;
}
.feature-private-row {
  min-height: 39px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  color: #111827;
  cursor: pointer;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.feature-private-row.is-selected {
  background: rgba(0, 0, 0, 0.075);
  transform: translateX(2px);
}
.feature-private-row:hover {
  background: rgba(0, 0, 0, 0.075);
  transform: translateX(2px);
}
.feature-private-row:active {
  background: rgba(0, 0, 0, 0.095);
  transform: translateX(2px) scale(0.995);
}
.feature-private-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
}
.feature-private-row small {
  color: #9aa2ab;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.feature-private-icon {
  width: 22px;
  height: 18px;
  display: block;
  position: relative;
}
.feature-private-icon.folder::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 2px;
  width: 10px;
  height: 5px;
  border-radius: 3px 3px 0 0;
  background: #a8c9ec;
}
.feature-private-icon.folder::after {
  content: "";
  position: absolute;
  inset: 5px 0 0;
  border-radius: 4px;
  background: linear-gradient(#b9d8f4, #8fb9e4);
  box-shadow: inset 0 0 0 1px var(--feature-shadow-ring);
}
.feature-private-icon.file {
  width: 20px;
  height: 24px;
  border-radius: 4px;
  background: #fbfbf8;
  box-shadow: inset 0 0 0 1px var(--feature-shadow-ring);
}
.feature-private-icon.file::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-top: 7px solid #ecece8;
  border-left: 7px solid transparent;
}
.feature-private-icon.file::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 11px;
  height: 1px;
  background: #d5d5d0;
  box-shadow: 0 4px 0 #d5d5d0;
}
@media (max-width: 900px) {
  .feature-bento-grid {
    grid-template-columns: 1fr;
  }
  .feature-bento-card {
    min-height: 460px;
    border-radius: 28px;
  }
  .feature-card-copy h3 {
    font-size: 30px;
  }
  .feature-card-copy p {
    font-size: 18px;
  }
}
@media (max-width: 520px) {
  .feature-bento-card {
    min-height: 420px;
    padding: 22px;
    border-radius: 24px;
  }
  .feature-card-visual {
    min-height: 220px;
  }
  .feature-reflect {
    min-height: 500px;
  }
  .feature-reflect .feature-card-visual {
    min-height: 300px;
    padding-bottom: 8px;
  }
  .feature-reflect .feature-paper-stack {
    height: 290px;
    width: min(330px, 100%);
  }
  .feature-reflect .feature-digest-paper {
    inset: 8px 0 0;
  }
  .feature-reflect .feature-digest-doc {
    padding: 16px 18px;
    gap: 8px;
  }
  .feature-reflect .feature-digest-header h4 {
    font-size: 21px;
  }
  .feature-reflect .feature-digest-header span {
    margin-bottom: 4px;
    font-size: 11px;
  }
  .feature-reflect .feature-digest-header p,
  .feature-reflect .feature-digest-section ul {
    font-size: 11.5px;
    line-height: 1.3;
  }
  .feature-reflect .feature-digest-section {
    padding-top: 8px;
  }
  .feature-reflect .feature-digest-section strong {
    margin-bottom: 5px;
    font-size: 12.5px;
  }
  .feature-reflect .feature-digest-section li {
    margin: 2px 0;
  }
  .feature-top8 .feature-people-widget {
    width: min(420px, 100%);
    padding: 20px 14px 24px;
  }
  .feature-top8 .feature-people-grid {
    gap: 14px 8px;
  }
  .feature-top8 .feature-people-grid > div {
    padding: 7px 2px 6px;
  }
  .feature-top8 .feature-people-grid span {
    font-size: 13px;
    overflow: visible;
    text-overflow: clip;
  }
  .feature-card-copy h3 {
    font-size: 27px;
    text-wrap: balance;
  }
  .feature-people-grid small[data-mobile-label] {
    font-size: 0;
  }
  .feature-people-grid small[data-mobile-label]::before {
    content: attr(data-mobile-label);
    font-size: 11px;
  }
}
.p-msg-user {
  align-self: flex-end;
  max-width: 82%;
  background: var(--theme-accent);
  color: #fff;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  transition: background 0.25s ease;
}
/* Assistant messages in Patina are plain text on the chat
       background — no bubble. A small leading inset keeps them off
       the pane edge. */
.p-msg-agent {
  align-self: flex-start;
  max-width: 92%;
  padding-left: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #111;
  letter-spacing: 0;
}
.p-msg-agent p {
  margin: 0;
}
.p-msg-agent p + p {
  margin-top: 8px;
}
.p-msg-agent ul {
  margin: 4px 0 0;
  padding-left: 14px;
}
.p-msg-agent ul + p {
  margin-top: 10px;
}
.p-msg-agent li {
  margin: 2px 0;
}
.p-msg-agent strong {
  font-weight: 600;
}

/* Collapsed tool-call chip — mirrors the iOS app's
       ToolCallGroupView: chevron on the left, secondary-tone label.
       Stacks tightly between messages. */
.p-tools {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 4px;
}
.p-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0;
  line-height: 1.3;
}
.p-tool::before {
  content: "›";
  font-size: 14px;
  color: rgba(0, 0, 0, 0.32);
  font-weight: 600;
  line-height: 1;
  width: 8px;
}

/* Scenes stack inside the shared messages container so messages
       accumulate as the user scrolls (rather than replacing one
       another). Each scene is just the new messages for that turn. */
.phone-scene {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.phone-scene[hidden] {
  display: none;
}
.phone-scene + .phone-scene {
  margin-top: 14px;
}
/* Staggered entry: items reveal by growing their own height so
       the rest of the stack shifts up progressively (instead of
       jumping to the final layout and then fading items in place).
       JS sets per-element animation-delay. */
.phone-scene.is-appearing .p-msg-user,
.phone-scene.is-appearing .p-msg-agent,
.phone-scene.is-appearing .p-tool {
  overflow: hidden;
}
.phone-scene.is-appearing .p-msg-user {
  animation: p-item-reveal-msg 0.35s ease-out both;
}
.phone-scene.is-appearing .p-msg-agent {
  animation: p-item-reveal-long 0.4s ease-out both;
}
.phone-scene.is-appearing .p-tool {
  animation: p-item-reveal-tool 0.22s ease-out both;
}
@keyframes p-item-reveal-msg {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    max-height: 400px;
    transform: translateY(0);
  }
}
@keyframes p-item-reveal-long {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    max-height: 1200px;
    transform: translateY(0);
  }
}
@keyframes p-item-reveal-tool {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 40px;
  }
}
.use-cases-section {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
.use-cases-header {
  max-width: 1200px;
  margin: 0 auto 32px;
  padding: 0 24px;
}
.use-case-scroll {
  --use-case-edge-fade: clamp(36px, 8vw, 128px);
  overflow: hidden;
  overscroll-behavior-x: contain;
  padding: 48px 0 72px max(24px, calc((100vw - 1200px) / 2));
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--use-case-edge-fade),
    #000 calc(100% - var(--use-case-edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--use-case-edge-fade),
    #000 calc(100% - var(--use-case-edge-fade)),
    transparent 100%
  );
}
.use-case-scroll::-webkit-scrollbar {
  display: none;
}
.use-case-mobile-controls {
  display: none;
}
.use-case-track {
  --use-case-marquee-distance: 2568px;
  width: max-content;
  display: flex;
  gap: 18px;
  animation: use-case-marquee 58s linear infinite;
  transform: translate3d(calc(-1 * var(--use-case-marquee-distance)), 0, 0);
}
.use-case-group {
  display: flex;
  gap: 18px;
}
@keyframes use-case-marquee {
  from {
    transform: translate3d(calc(-1 * var(--use-case-marquee-distance)), 0, 0);
  }
  to {
    transform: translate3d(calc(-2 * var(--use-case-marquee-distance)), 0, 0);
  }
}
.use-case-card {
  flex: 0 0 min(410px, calc(100vw - 48px));
  min-height: 360px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  padding: 24px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  will-change: transform;
}
.use-case-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.12);
}
.use-case-prompt {
  align-self: flex-end;
  max-width: 92%;
  padding: 14px 18px;
  border-radius: 24px;
  border-bottom-right-radius: 8px;
  background: var(--theme-accent);
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
  box-shadow: 0 10px 24px
    color-mix(in srgb, var(--theme-accent) 24%, transparent);
}
.use-case-answer {
  margin-top: 18px;
  max-width: 88%;
  padding: 14px 18px;
  border-radius: 22px;
  border-bottom-left-radius: 8px;
  background: color-mix(in srgb, var(--theme-bg) 58%, #fff);
  color: rgba(0, 0, 0, 0.72);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}
.use-case-apps {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.use-case-apps img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  outline: 1px solid rgba(0, 0, 0, 0.12);
  outline-offset: -1px;
}
@media (max-width: 720px) {
  .use-case-scroll {
    padding: 18px 24px 14px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .use-case-scroll.is-mobile-carousel .use-case-track {
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 24px;
    animation: none;
    transform: none;
  }
  .use-case-scroll.is-mobile-carousel .use-case-group {
    width: 100%;
    gap: 0;
    transition: transform 0.18s ease-out;
  }
  .use-case-scroll.is-mobile-carousel .use-case-group[aria-hidden="true"] {
    display: none;
  }
  .use-case-card {
    flex-basis: 100%;
    min-width: 100%;
    min-height: 330px;
    border-radius: 24px;
    padding: 20px;
  }
  .use-case-card:hover {
    transform: none;
  }
  .use-case-prompt {
    font-size: 19px;
  }
  .use-case-answer {
    font-size: 15px;
  }
  .use-case-mobile-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 24px 24px;
  }
  .use-case-mobile-arrow,
  .use-case-mobile-dot {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
  }
  .use-case-mobile-arrow {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.68);
    background: rgba(255, 255, 255, 0.86);
    box-shadow:
      0 0 0 0.5px rgba(0, 0, 0, 0.08),
      0 6px 16px rgba(0, 0, 0, 0.08);
  }
  .use-case-mobile-arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .use-case-mobile-dots {
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }
  .use-case-mobile-dot {
    position: relative;
    width: 7px;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    padding: 0;
    transition:
      width 0.18s ease-out,
      background 0.18s ease-out;
  }
  .use-case-mobile-dot.is-active {
    width: 38px;
    background: rgba(0, 0, 0, 0.14);
  }
  .use-case-dot-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--theme-accent);
  }
  .use-case-mobile-dot.is-active .use-case-dot-progress {
    animation: use-case-dot-progress var(--use-case-carousel-duration, 5600ms)
      linear forwards;
  }
  @keyframes use-case-dot-progress {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .use-case-scroll {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .use-case-track {
    animation: none;
  }
  .use-case-card {
    transition: none;
    will-change: auto;
  }
  .use-case-scroll.is-mobile-carousel .use-case-group {
    transition: none;
  }
  .use-case-mobile-dot.is-active .use-case-dot-progress {
    animation: none;
    width: 100%;
  }
}

/* Bento grid — four-up feature highlights with varied sizes.
       Desktop is a 3-col × 2-row grid where one card spans two rows
       (tall), another spans two cols (wide), and the remaining two
       sit as squares beneath the wide card. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px 300px;
  gap: 16px;
  margin-top: 32px;
}
.bento-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bento-card.tall {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.bento-card.wide {
  grid-column: 2 / span 2;
  grid-row: 1;
}
.bento-card.small-a {
  grid-column: 2;
  grid-row: 2;
}
.bento-card.small-b {
  grid-column: 3;
  grid-row: 2;
}
.bento-visual {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  min-height: 0;
  font-family: var(--font-ui);
}
.bento-card h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 2px;
  color: var(--text);
}
.bento-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* iMessage: stacked speech bubbles. Tall card so we show more.
       Pin to the top of the visual area (not vertically centered). */
.bento-card.tall .bento-visual {
  align-items: flex-start;
}
.bento-imessage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.bento-msg {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  position: relative;
}
/* Reaction + emoji picker controls for iMessage card bubbles. */
.bento-bubble-group {
  position: relative;
}
.bento-msg-reaction {
  position: absolute;
  top: -12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  z-index: 2;
}
.bento-msg.incoming .bento-msg-reaction {
  right: -8px;
}
.bento-msg.outgoing .bento-msg-reaction {
  left: -8px;
}
.bento-msg-reaction.visible {
  display: inline-flex;
}
.bento-msg-react {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: #666;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  align-self: center;
  opacity: 0;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}
.bento-msg-react:hover {
  background: rgba(0, 0, 0, 0.1);
}
.bento-msg-react svg {
  display: block;
}
.bento-msg:hover .bento-msg-react,
.bento-msg .bento-msg-react.open {
  opacity: 1;
}
.bento-react-picker {
  position: absolute;
  top: -44px;
  background: #fff;
  border-radius: 999px;
  padding: 5px 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  display: none;
  gap: 2px;
  z-index: 10;
}
.bento-msg.incoming .bento-react-picker {
  left: 28px;
}
.bento-msg.outgoing .bento-react-picker {
  right: 0;
}
.bento-react-picker.open {
  display: flex;
}
.bento-react-picker button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.12s ease,
    background 0.12s ease;
}
.bento-react-picker button:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: scale(1.18);
}
.bento-msg.incoming {
  align-self: flex-start;
  max-width: 90%;
}
.bento-msg.outgoing {
  align-self: flex-end;
  justify-content: flex-end;
  max-width: 75%;
}
.bento-msg-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.bento-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* iOS 26 group header: emoji avatar with pill-shaped name label
       overlapping the bottom of the avatar. */
.bento-imessage-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
  gap: 0;
}
.bento-imessage-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(140deg, #c6d2de 0%, #7a90a8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}
.bento-imessage-title {
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-top: -4px;
  position: relative;
  z-index: 1;
}
.bento-bubble {
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 20px;
  line-height: 1.35;
  max-width: 100%;
  letter-spacing: 0;
}
.bento-bubble.incoming {
  background: #e9e9eb;
  color: #111;
}
.bento-bubble.outgoing {
  background: #0b84ff;
  color: #fff;
}

/* Connections: two marquee rows sliding in opposite directions.
       Spans the full card width via negative margin that cancels the
       card's 28px padding so icons flow edge to edge. */
.bento-marquee-wrap {
  position: relative;
  width: calc(100% + 56px);
  margin: 0 -28px;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bento-marquee-wrap::before,
.bento-marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 5;
  pointer-events: none;
}
.bento-marquee-wrap::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--card) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.bento-marquee-wrap::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--card) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.bento-marquee {
  overflow-x: clip;
  overflow-y: visible;
}
.bento-marquee-track {
  display: flex;
  width: max-content;
  animation: bento-marquee-left 110s linear infinite;
}
.bento-marquee-track.reverse {
  animation-name: bento-marquee-right;
}
.bento-marquee-track img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  background: #fff;
  margin-right: 14px;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.2s ease;
}
.bento-marquee-track img:hover {
  transform: scale(1.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  z-index: 2;
  position: relative;
}
/* Tooltip: shared floating label, positioned by JS above the
       hovered icon. */
.bento-marquee-tooltip {
  position: absolute;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.15s ease;
  z-index: 20;
  letter-spacing: 0;
}
.bento-marquee-tooltip.visible {
  opacity: 1;
}
@keyframes bento-marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes bento-marquee-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bento-marquee-track {
    animation: none;
  }
}

.bento-widgets {
  position: relative;
  width: min(290px, 100%);
  height: 196px;
  transform: translateY(-2px);
}
.bento-widget {
  position: absolute;
  width: 158px;
  height: 146px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.11);
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.24s ease;
}
.bento-clock-widget {
  right: 0;
  top: 24px;
  transform: rotate(7deg);
  z-index: 1;
}
.bento-weather-widget {
  left: 74px;
  top: 10px;
  transform: rotate(-3deg);
  z-index: 4;
}
.bento-date-widget {
  left: 0;
  top: 30px;
  transform: rotate(-8deg);
  z-index: 3;
  justify-content: center;
  gap: 2px;
}
.bento-widgets:has(.bento-date-widget:hover) .bento-weather-widget {
  transform: translate(42px, -6px) rotate(4deg);
}
.bento-widgets:has(.bento-date-widget:hover) .bento-clock-widget {
  transform: translate(28px, 18px) rotate(10deg);
}
.bento-widgets:has(.bento-weather-widget:hover) .bento-date-widget {
  transform: translate(-28px, 14px) rotate(-12deg);
}
.bento-widgets:has(.bento-weather-widget:hover) .bento-clock-widget {
  transform: translate(34px, 14px) rotate(10deg);
}
.bento-widgets:has(.bento-clock-widget:hover) .bento-date-widget {
  transform: translate(-26px, 16px) rotate(-12deg);
}
.bento-widgets:has(.bento-clock-widget:hover) .bento-weather-widget {
  transform: translate(-36px, -2px) rotate(-5deg);
}
.bento-widget:hover {
  z-index: 10;
  transform: translateY(-8px) rotate(0deg) scale(1.04);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
}
.bento-widget-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8a939d;
}
.bento-widget-label svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.bento-widget-label span,
.bento-date-widget span {
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  color: #8a939d;
}
.bento-date-widget span {
  color: #ff3b4d;
  font-size: 22px;
  text-align: center;
  text-transform: none;
}
.bento-date-widget strong {
  color: #111827;
  font-size: 68px;
  font-weight: 850;
  line-height: 0.95;
  text-align: center;
  letter-spacing: 0;
}
.bento-weather-widget strong {
  color: #111827;
  font-size: 38px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
}
.bento-weather-widget dl {
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
}
.bento-weather-widget dl div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.bento-weather-widget dt {
  margin: 0;
  color: #8a939d;
}
.bento-weather-widget dd {
  margin: 0;
  color: #111827;
}
.bento-clock-face {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  align-self: center;
  background:
    linear-gradient(#c4c7cb, #c4c7cb) 50% 10px / 2px 11px no-repeat,
    linear-gradient(#c4c7cb, #c4c7cb) 50% calc(100% - 10px) / 2px 11px no-repeat,
    linear-gradient(90deg, #c4c7cb, #c4c7cb) 10px 50% / 11px 2px no-repeat,
    linear-gradient(90deg, #c4c7cb, #c4c7cb) calc(100% - 10px) 50% / 11px 2px
      no-repeat,
    #fff;
}
.bento-clock-face::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background:
    linear-gradient(#d5d7da, #d5d7da) 50% 0 / 1px 8px no-repeat,
    linear-gradient(#d5d7da, #d5d7da) 50% 100% / 1px 8px no-repeat,
    linear-gradient(90deg, #d5d7da, #d5d7da) 0 50% / 8px 1px no-repeat,
    linear-gradient(90deg, #d5d7da, #d5d7da) 100% 50% / 8px 1px no-repeat;
  transform: rotate(30deg);
}
.bento-clock-face i,
.bento-clock-face b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;
  border-radius: 999px;
  background: #2f3338;
}
.bento-clock-face i {
  width: 3px;
  height: 34px;
  transform: translate(-50%, -100%) rotate(150deg);
}
.bento-clock-face b {
  width: 3px;
  height: 28px;
  transform: translate(-50%, -100%) rotate(-35deg);
}
.bento-clock-face::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #111827;
  transform: translate(-50%, -50%);
}

/* Theme picker card: row of colored circles. Tap to set
       --theme-accent on :root, which the outgoing iMessage bubble
       (and any other accent-driven elements) reads from. */
/* Theme picker card: row of colored circles. Tap to set
       --theme-accent on :root, which the outgoing iMessage bubble
       (and any other accent-driven elements) reads from. */
.bento-themes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
  justify-items: center;
}
.bento-theme {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
  position: relative;
}
.bento-theme:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}
.bento-theme:focus-visible {
  outline: none;
}
.bento-theme.active {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px rgba(0, 0, 0, 0.22);
}

@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .bento-card.tall,
  .bento-card.wide,
  .bento-card.small-a,
  .bento-card.small-b {
    grid-column: auto;
    grid-row: auto;
  }
  .bento-card {
    min-height: 280px;
    padding: 24px;
    border-radius: 20px;
  }
  .bento-marquee-track img {
    width: 46px;
    height: 46px;
    margin-right: 12px;
  }
  .bento-card.small-b .bento-visual {
    align-items: flex-end;
    height: 200px;
    flex: 0 0 200px;
  }
}
@media (max-width: 720px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .bento-themes {
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0;
    align-items: center;
    justify-items: center;
  }
  .bento-theme {
    width: min(72px, 70%);
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 80%;
  }
}

/* Pricing */
.pricing-section {
  max-width: 1200px;
}
.pricing-header {
  max-width: 720px;
  margin-bottom: 28px;
}
.pricing-header .eyebrow {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--theme-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pricing-card {
  position: relative;
  min-width: 0;
  min-height: 100%;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.pricing-card.featured {
  border-color: color-mix(in srgb, var(--theme-accent) 28%, var(--border));
  box-shadow: 0 14px 40px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}
.pricing-card h3 {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-secondary);
}
.pricing-price {
  margin: 8px 0 12px;
  color: var(--text);
  font-family: var(--font);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.pricing-price small {
  margin-left: 4px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.pricing-tagline {
  min-height: 42px;
  margin: 0 0 24px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}
.pricing-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}
.pricing-features li::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-color: var(--theme-accent);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.2l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.2l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.pricing-features a {
  color: var(--theme-accent);
  text-decoration: none;
}
.pricing-features a:hover {
  text-decoration: underline;
}
.pricing-card .cta-button {
  width: 100%;
  min-height: 44px;
  margin-bottom: 0;
  padding: 12px 18px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}
.pricing-card .cta-button.secondary {
  background: #f1f1f0;
  color: var(--text);
}
.pricing-note {
  max-width: 680px;
  margin: 18px auto 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
@media (min-width: 721px) and (max-width: 1020px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-card {
    padding: 28px 24px;
  }
}

/* Final CTA */
.final-cta-section {
  padding-block: 0;
}
.final-cta {
  width: 100%;
  max-width: 960px;
  text-align: center;
  padding: 88px 24px;
  margin: 24px auto 80px;
  border-radius: 32px;
  background: var(--theme-accent);
  box-shadow: 0 24px 70px
    color-mix(in srgb, var(--theme-accent) 28%, transparent);
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.16s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .final-cta:is(:hover, :focus-within) {
    transform: translateY(-3px);
  }
}
.final-cta h2 {
  max-width: 680px;
  margin: 0 auto 14px;
  color: #fff;
}
.final-cta .lede {
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.86);
  opacity: 1;
  max-width: none;
}
.final-cta .cta-stack {
  margin-bottom: 0;
}
.final-waitlist-form {
  width: min(100%, 560px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: stretch;
  position: relative;
}
.final-waitlist-form input {
  min-width: 0;
  width: 100%;
  height: 64px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.final-waitlist-form input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}
.final-waitlist-form input:focus {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 4px rgba(255, 255, 255, 0.14);
}
.final-cta .cta-button {
  font-family: var(--font);
  color: var(--theme-accent);
  background: #fff;
  padding: 22px 46px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
}
.final-waitlist-form .cta-button {
  height: 64px;
  min-height: 64px;
  box-sizing: border-box;
  margin-bottom: 0;
  padding: 0 34px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  align-self: stretch;
}
.final-waitlist-form .cta-button[disabled] {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}
.final-waitlist-status {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  min-height: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.35;
  pointer-events: none;
}
.final-waitlist-status.is-error {
  color: #fff;
}
@media (max-width: 720px) {
  .final-waitlist-form {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .final-waitlist-form input,
  .final-waitlist-form .cta-button {
    width: 100%;
    height: 58px;
    min-height: 58px;
    font-size: 16px;
  }
  .final-waitlist-status {
    position: static;
    margin-top: -2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .final-cta {
    transform: none;
    transition:
      background 0.35s ease,
      box-shadow 0.35s ease;
  }
}

/* Footer */
footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
}
footer a {
  color: var(--text-secondary);
  text-decoration: none;
  margin-left: 18px;
}
footer a:hover {
  color: var(--text);
}
footer .left a {
  margin-left: 4px;
  color: var(--text);
}

/* Responsive */
@media (max-width: 720px) {
  header {
    padding: 72px 16px 0;
  }
  header h1 {
    font-size: 30px;
    margin-bottom: 12px;
  }
  .hero-logo {
    margin-bottom: 24px;
  }
  .hero-orb-canvas {
    width: 72px;
    height: 72px;
    border-radius: 20px;
  }
  .cta-button {
    margin-bottom: 20px;
  }
  .cta-stack {
    margin-top: 14px;
    margin-bottom: 20px;
  }
  header .subtitle {
    font-size: 17px;
    margin-bottom: 18px;
  }
  section {
    padding: 40px 24px;
  }
  section h2 {
    font-size: 28px;
  }
  section .lede {
    font-size: 16px;
  }
  footer {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
  footer a:first-child {
    margin-left: 0;
  }
}

/* FAQ */

.faq {
  max-width: 960px;
  margin: 0 auto;
}
.faq-list {
  margin-top: 40px;
}
/* Allow keyword values (like `auto`) to interpolate, which lets
       the ::details-content height animate from 0 to its natural
       height on open and back on close. Progressive enhancement:
       browsers without support just toggle instantly. */
:root {
  interpolate-size: allow-keywords;
}

.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--theme-accent) 10%, #0a0a0a);
  list-style: none;
  position: relative;
  transition: color 0.3s ease;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  color: var(--text-secondary);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
/* Animate the collapsible content region itself. */
.faq-item::details-content {
  overflow: clip;
  height: 0;
  opacity: 0;
  transition:
    height 0.3s cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 0.25s ease,
    content-visibility 0.3s allow-discrete;
}
.faq-item[open]::details-content {
  height: auto;
  opacity: 1;
}
.faq-body {
  padding: 0 0 20px;
  color: color-mix(in srgb, var(--theme-accent) 14%, #4a4a4a);
  font-size: 16px;
  line-height: 1.55;
  transition: color 0.3s ease;
  letter-spacing: 0;
}
.faq-body p {
  margin: 0 0 10px;
}
.faq-body strong {
  font-weight: 500;
}
.faq-body p:last-child {
  margin-bottom: 0;
}
.faq-connections-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 14px;
}
.faq-connection {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  color: color-mix(in srgb, var(--theme-accent) 12%, #1f1f1f);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}
.faq-connection img {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.faq-connection span {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .faq-item summary {
    font-size: 16px;
    padding: 16px 36px 16px 0;
  }
  .faq-body {
    font-size: 15px;
  }
  .faq-connections-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px 10px;
  }
  .faq-connection {
    font-size: 14px;
  }
}
@media (max-width: 520px) {
  .faq-connections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dl-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.dl-modal.open {
  display: flex;
}
.dl-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dl-modal-card {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 28px 24px 24px;
  animation: dl-rise 0.18s ease-out;
}
@keyframes dl-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dl-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  border-radius: 8px;
}
.dl-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #333;
}
.dl-modal-body {
  text-align: center;
}
.dl-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 10px;
}
.dl-modal-body h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 0;
}
.dl-modal-body > p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 18px;
  text-wrap: pretty;
}
#dl-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#dl-email {
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  outline: none;
  font-family: inherit;
  -webkit-appearance: none;
}
#dl-email:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
#dl-submit {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
#dl-submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}
#dl-modal-success .cta-button {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
}
.dl-modal-error {
  color: #c33;
  font-size: 13px;
  margin-top: 10px !important;
}
.dl-modal-skip {
  margin-top: 14px !important;
  font-size: 13px;
}
.dl-modal-skip a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.hero-mac.interactive-mac .hero-mac-journal-page .hero-mac-journal-header,
.hero-mac.interactive-mac .hero-mac-people-page .hero-mac-people-header,
.hero-mac.interactive-mac .hero-mac-files-index .hero-mac-files-header {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin-bottom: 28px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  text-align: left !important;
}
.hero-mac.interactive-mac .hero-mac-journal-page .hero-mac-journal-month {
  max-width: none !important;
  padding: 0 !important;
  margin-top: 24px !important;
}
.hero-mac.interactive-mac
  .hero-mac-journal-page
  .hero-mac-journal-header
  + .hero-mac-journal-month {
  margin-top: 0 !important;
}
.hero-mac.interactive-mac .hero-mac-journal-page .hero-mac-journal-header h2,
.hero-mac.interactive-mac .hero-mac-people-page .hero-mac-people-header h2,
.hero-mac.interactive-mac .hero-mac-files-index .hero-mac-files-header h2,
.hero-mac.interactive-mac .hero-mac-journal-page .hero-mac-journal-header p,
.hero-mac.interactive-mac .hero-mac-people-page .hero-mac-people-header p,
.hero-mac.interactive-mac .hero-mac-files-index .hero-mac-files-header p {
  text-align: left !important;
}
.hero-mac.interactive-mac .hero-mac-workspace,
.hero-mac.interactive-mac .hero-mac-view,
.hero-mac.interactive-mac .hero-mac-home,
.hero-mac.interactive-mac .hero-mac-new-chat-view .hero-mac-messages,
.hero-mac.interactive-mac .hero-mac-todo-page,
.hero-mac.interactive-mac .hero-mac-journal-page,
.hero-mac.interactive-mac .hero-mac-people-page,
.hero-mac.interactive-mac .hero-mac-files-index,
.hero-mac.interactive-mac .hero-mac-files-index .hero-mac-files-content {
  overflow: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
.hero-mac.interactive-mac .hero-mac-home::-webkit-scrollbar,
.hero-mac.interactive-mac
  .hero-mac-new-chat-view
  .hero-mac-messages::-webkit-scrollbar,
.hero-mac.interactive-mac .hero-mac-todo-page::-webkit-scrollbar,
.hero-mac.interactive-mac .hero-mac-journal-page::-webkit-scrollbar,
.hero-mac.interactive-mac .hero-mac-people-page::-webkit-scrollbar,
.hero-mac.interactive-mac
  .hero-mac-files-index
  .hero-mac-files-content::-webkit-scrollbar {
  display: none !important;
}
.hero-mac.interactive-mac .hero-mac-home-pills {
  overflow: visible !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 8px 0 !important;
}
.hero-mac.interactive-mac .hero-mac-view.hero-mac-home,
.hero-mac.interactive-mac .hero-mac-home-inner {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}