@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --paper: #f5f6f1;
  --paper-2: #edf0e9;
  --white: #ffffff;
  --ink: #17201c;
  --ink-2: #505c55;
  --ink-3: #7d8881;
  --line: #d9ded7;
  --line-dark: #bec6bd;
  --coral: #f46342;
  --coral-dark: #dc4e30;
  --coral-soft: #fff0e9;
  --cobalt: #315bef;
  --cobalt-soft: #e9eeff;
  --mint: #36a873;
  --mint-soft: #e6f6ee;
  --amber: #d49135;
  --app-bg: #f7f8f5;
  --app-surface: #ffffff;
  --app-sidebar: #f1f3ef;
  --app-border: #dfe3dd;
  --shadow: 0 24px 70px rgba(23, 32, 28, .12), 0 3px 14px rgba(23, 32, 28, .06);
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --shell: min(1280px, calc(100vw - 64px));
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
#features, #workflows, #pricing, #platforms, section[id], section, .details-section, .bento-studio-section, .pricing-section, .control-section, .platform-strip { scroll-margin-top: 84px; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-180%);
  background: var(--ink);
  color: white;
  padding: 10px 14px;
  border-radius: 7px;
  text-decoration: none;
  font-size: 13px;
}
.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: 72px;
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.site-header.is-scrolled {
  background: rgba(245, 246, 241, .88);
  border-color: rgba(190, 198, 189, .62);
  box-shadow: 0 6px 26px rgba(23, 32, 28, .04);
  backdrop-filter: blur(18px);
}
.nav-shell { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 800; letter-spacing: -.045em; text-decoration: none; }
.brand-beat { height: 22px; display: inline-flex; align-items: center; gap: 2px; color: var(--coral); }
.brand-beat > i { width: 3px; height: 9px; border-radius: 3px; background: currentColor; transform-origin: center; }
.brand-beat > i:nth-child(2) { height: 19px; }
.brand-beat > i:nth-child(3) { height: 13px; }
.brand-beat > i:nth-child(4) { height: 16px; }
.brand:hover .brand-beat > i { animation: beat .7s var(--ease) both; }
.brand:hover .brand-beat > i:nth-child(2) { animation-delay: .08s; }
.brand:hover .brand-beat > i:nth-child(3) { animation-delay: .14s; }
.brand:hover .brand-beat > i:nth-child(4) { animation-delay: .2s; }
@keyframes beat { 45% { transform: scaleY(.35); } }
.desktop-nav { position: absolute; left: 50%; display: flex; gap: 34px; transform: translateX(-50%); }
.desktop-nav a, .text-link { position: relative; color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 650; }
.desktop-nav a::after, .text-link::after { content: ''; position: absolute; inset: auto 0 -5px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .24s var(--ease); }
.desktop-nav a:hover::after, .text-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 22px; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0 20px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  transition: transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button svg { width: 18px; height: 18px; }
.button-small { min-height: 39px; padding-inline: 15px; }
.button-dark { background: var(--ink); color: white; box-shadow: 0 7px 18px rgba(23, 32, 28, .12); }
.button-dark:hover { background: #27312c; box-shadow: 0 10px 24px rgba(23, 32, 28, .18); }
.button-primary { background: var(--coral); color: white; box-shadow: 0 12px 24px rgba(244, 99, 66, .22); }
.button-primary:hover { background: var(--coral-dark); box-shadow: 0 16px 30px rgba(244, 99, 66, .28); }
.button-quiet { border-color: var(--line-dark); background: rgba(255, 255, 255, .28); color: var(--ink); }
.button-quiet:hover { background: white; border-color: var(--ink-3); }
.button-large { min-height: 57px; padding-inline: 25px; font-size: 14px; }
.menu-button { display: none; width: 40px; height: 40px; border: 0; background: transparent; padding: 10px; }
.menu-button span { display: block; width: 20px; height: 1.5px; margin: 5px 0; background: var(--ink); transition: transform .2s; }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.mobile-menu { display: none; }
.mobile-menu[hidden] { display: none; }

/* Hero */
.hero { position: relative; padding: 165px 0 0; overflow: hidden; background: var(--paper); }
.hero::before {
  content: '';
  position: absolute;
  width: 740px;
  height: 740px;
  top: -380px;
  right: -200px;
  border: 1px solid rgba(190, 198, 189, .56);
  border-radius: 50%;
  box-shadow: 0 0 0 84px rgba(255,255,255,.13), 0 0 0 168px rgba(255,255,255,.1), 0 0 0 252px rgba(255,255,255,.07);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(60px, 7vw, 120px); align-items: center; min-height: 565px; }
.eyebrow, .kicker { margin: 0 0 25px; color: var(--ink-2); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(54,168,115,.12); }
h1, h2, h3, p { text-wrap: pretty; }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(56px, 6.5vw, 94px); line-height: .97; letter-spacing: -.07em; font-weight: 750; }
.hero h1 em { color: var(--coral); font-style: normal; font-weight: 600; }
.hero-lede { max-width: 615px; margin: 32px 0 0; color: var(--ink-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.72; letter-spacing: -.012em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 33px; }
.hero-note { margin: 15px 0 0; color: var(--ink-3); font-family: var(--mono); font-size: 10px; }
.hero-proof { position: relative; align-self: center; padding: 15px; border: 1px solid var(--line-dark); border-radius: 20px; background: rgba(255,255,255,.45); box-shadow: var(--shadow); transform: rotate(1deg); }
.hero-proof::before { content: ''; position: absolute; inset: -22px 38px auto auto; width: 88px; height: 25px; background: var(--coral); opacity: .82; transform: rotate(6deg); clip-path: polygon(3% 15%,98% 0,95% 88%,0 100%); }
.proof-head, .proof-foot { display: flex; align-items: center; justify-content: space-between; }
.proof-head { padding: 7px 6px 14px; font-family: var(--mono); font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.live-label { display: inline-flex; align-items: center; gap: 6px; color: var(--mint); }
.live-label i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: livePulse 1.8s infinite; }
@keyframes livePulse { 50% { opacity: .3; } }
.proof-window { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.proof-intro { display: flex; align-items: center; justify-content: space-between; padding: 22px; border-bottom: 1px solid var(--line); }
.proof-intro > div { display: flex; flex-direction: column; gap: 6px; }
.micro-label { color: var(--coral); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.proof-intro strong { font-size: 14px; letter-spacing: -.025em; }
.proof-pill { border: 1px solid var(--line); border-radius: 99px; padding: 5px 8px; color: var(--ink-3); font-family: var(--mono); font-size: 8px; }
.channel-line { display: flex; align-items: center; gap: 7px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.channel-icon { display: inline-grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: white; font-size: 8px; font-weight: 800; letter-spacing: -.03em; }
.channel-icon.youtube { background: #ef3d43; }
.channel-icon.instagram { background: linear-gradient(140deg,#7a49e8,#f84d7e,#f3a52f); }
.channel-icon.linkedin { background: #2974b8; }
.channel-icon.telegram { background: #389ed4; }
.line-progress { position: relative; height: 3px; flex: 1; margin-left: 5px; overflow: hidden; border-radius: 3px; background: var(--paper-2); }
.line-progress i { position: absolute; inset: 0 auto 0 0; width: 64%; background: var(--coral); animation: queueProgress 4s var(--ease) infinite alternate; }
@keyframes queueProgress { to { width: 87%; } }
.line-time { color: var(--ink-3); font-family: var(--mono); font-size: 8px; }
.proof-calendar { display: grid; grid-template-columns: repeat(5,1fr); padding: 14px 12px 17px; }
.cal-day { min-height: 78px; padding: 10px 8px; border-right: 1px solid var(--line); }
.cal-day:last-child { border: 0; }
.cal-day small { display: block; color: var(--ink-3); font-family: var(--mono); font-size: 7px; }
.cal-day b { display: block; margin: 7px 0 9px; font-size: 13px; }
.cal-day.active { border: 1px solid var(--coral); border-radius: 8px; background: var(--coral-soft); transform: translateY(-2px); }
.event { display: block; width: 80%; height: 3px; margin-top: 5px; border-radius: 3px; }
.event.coral { background: var(--coral); }
.event.blue { background: var(--cobalt); }
.event.mint { background: var(--mint); width: 52%; }
.proof-foot { padding: 15px 7px 4px; color: var(--ink-3); font-family: var(--mono); font-size: 8px; }
.proof-foot b { color: var(--ink); }
.hero-rule { display: flex; align-items: center; gap: 15px; margin-top: 95px; color: var(--ink-3); font-family: var(--mono); font-size: 8px; letter-spacing: .18em; }
.hero-rule span { height: 1px; flex: 1; background: var(--line-dark); }
.hero-rule span:last-child { flex: 3.5; }

/* Platform strip */
.platform-strip { padding: 26px 0; border-bottom: 1px solid var(--line); }
.platform-inner { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.platform-inner > p { margin: 0; color: var(--ink-3); font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.platform-list { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); color: var(--ink-2); }
.platform-list > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; font-weight: 700; }
.platform-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: white; font-size: 8px; font-style: normal; font-weight: 800; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.platform-mark svg { display: block; width: 13px; height: 13px; }
.platform-mark.youtube { background: #ff0000; box-shadow: 0 2px 6px rgba(255,0,0,0.25); }
.platform-mark.tiktok { background: #000000; }
.platform-mark.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); box-shadow: 0 2px 6px rgba(214,36,159,0.3); }
.platform-mark.facebook { background: #1877f2; box-shadow: 0 2px 6px rgba(24,119,242,0.3); }
.platform-mark.reddit { background: #ff4500; box-shadow: 0 2px 6px rgba(255,69,0,0.3); }
.platform-mark.snapchat { background: #fffc00; box-shadow: 0 2px 6px rgba(255,252,0,0.35); }
.platform-mark.discord { background: #5865f2; box-shadow: 0 2px 6px rgba(88,101,242,0.3); }
.platform-mark.telegram { background: #229ed9; box-shadow: 0 2px 6px rgba(34,158,217,0.3); }
.platform-mark.whop { background: #ff6243; box-shadow: 0 2px 6px rgba(255,98,67,0.3); }
.platform-mark.shopify { background: #ffffff; border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.platform-mark.linkedin { background: #0a66c2; box-shadow: 0 2px 6px rgba(10,102,194,0.3); }
.platform-mark.threads { background: #000000; }
.platform-mark.x { background: #000000; }
.platform-mark.pinterest { background: #e60023; box-shadow: 0 2px 6px rgba(230,0,35,0.3); }
.platform-mark.slack { background: #ffffff; border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.platform-mark.whatsapp { background: #25d366; box-shadow: 0 2px 6px rgba(37,211,102,0.3); }

/* Workflow section */
.workflow-section, .details-section, .bento-studio-section, .control-section { padding: 45px 0; background: var(--white); }
.details-section, .bento-studio-section, .control-section { background: var(--paper); }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: end; margin-bottom: 24px; }
.section-intro .kicker { grid-column: 1 / -1; margin-bottom: 12px; }
.section-intro h2, .control-copy h2, .download-panel h2 { margin: 0; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.05em; }
.section-intro > p:last-child { max-width: 540px; margin: 0 0 4px auto; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.workflow-selector { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.workflow-tab { position: relative; min-height: 118px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); padding: 19px 20px; text-align: left; cursor: pointer; transition: background .2s; }
.workflow-tab:last-child { border-right: 0; }
.workflow-tab::after { content: ''; position: absolute; inset: auto 0 -1px; height: 3px; background: var(--coral); transform: scaleX(0); transition: transform .28s var(--ease); }
.workflow-tab:hover { background: var(--paper); }
.workflow-tab.is-active { background: var(--paper); }
.workflow-tab.is-active::after { transform: scaleX(1); }
.workflow-tab span { display: block; margin-bottom: 15px; color: var(--ink-3); font-family: var(--mono); font-size: 9px; }
.workflow-tab b { display: block; font-size: 13px; }
.workflow-tab small { display: block; margin-top: 5px; color: var(--ink-3); font-size: 10px; line-height: 1.4; }

.demo-wrap { position: relative; margin-top: 34px; overflow: hidden; border: 1px solid #cbd0ca; border-radius: 16px; background: #0f1613; box-shadow: 0 34px 80px rgba(23,32,28,.19); outline: none; }
.demo-wrap:focus-visible { box-shadow: 0 0 0 4px var(--cobalt-soft), var(--shadow); }
.demo-topline { height: 43px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 15px; background: #1b2420; color: #aab4ae; }
.window-dots { display: flex; gap: 7px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #526059; }
.window-dots i:first-child { background: #ef6a55; }
.window-dots i:nth-child(2) { background: #e3b54d; }
.window-dots i:nth-child(3) { background: #5fb981; }
.demo-address { display: inline-flex; min-width: 240px; align-items: center; justify-content: center; gap: 7px; border-radius: 5px; background: rgba(255,255,255,.055); padding: 6px 16px; font-family: var(--mono); font-size: 8px; }
.demo-address i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.demo-controls { justify-self: end; display: flex; align-items: center; gap: 7px; }
.demo-status { display: inline-flex; align-items: center; gap: 6px; margin-right: 5px; font-family: var(--mono); font-size: 7px; text-transform: uppercase; letter-spacing: .1em; }
.demo-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.demo-status.is-paused i { background: var(--amber); }
.icon-control { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: transparent; color: #bac2bd; cursor: pointer; }
.icon-control:hover { border-color: rgba(255,255,255,.32); color: white; }
.icon-control svg { width: 13px; height: 13px; }
.icon-control .play-icon { display: none; }
.icon-control.is-paused .pause-icon { display: none; }
.icon-control.is-paused .play-icon { display: block; }
.demo-body { position: relative; display: grid; grid-template-columns: 178px 1fr; height: 635px; overflow: hidden; background: var(--app-bg); }
.app-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--app-border); background: var(--app-sidebar); padding: 18px 11px 12px; }
.app-brand { display: flex; align-items: center; gap: 8px; margin: 0 5px 15px; padding-bottom: 14px; border-bottom: 1px solid var(--app-border); color: #29342e; text-decoration: none; }
.app-brand > span:last-child { display: flex; flex-direction: column; font-size: 12px; font-weight: 800; }
.app-brand small { margin-top: 2px; color: #9ca59f; font-family: var(--mono); font-size: 5px; letter-spacing: .12em; }
.app-mark { display: inline-flex; width: 27px; height: 27px; align-items: center; justify-content: center; gap: 1.7px; border-radius: 7px; background: var(--coral); color: white; }
.app-mark > i { width: 2px; height: 7px; border-radius: 2px; background: currentColor; }
.app-mark > i:nth-child(2) { height: 15px; }
.app-mark > i:nth-child(3) { height: 9px; }
.app-mark > i:nth-child(4) { height: 12px; }
.app-sidebar > p { margin: 13px 8px 5px; color: #a0aaa4; font-family: var(--mono); font-size: 6px; letter-spacing: .12em; }
.app-nav { position: relative; display: flex; width: 100%; height: 32px; align-items: center; gap: 9px; border: 0; border-radius: 6px; background: transparent; color: #657069; padding: 0 9px; text-align: left; font-size: 8.5px; font-weight: 650; cursor: default; transition: color .2s, background .2s, transform .15s; }
.app-nav svg { width: 13px; height: 13px; }
.app-nav small { margin-left: auto; border-radius: 5px; background: #e3e7e2; padding: 1px 5px; color: #7e8881; font-family: var(--mono); font-size: 6px; }
.app-nav.is-active { background: #ffe6dc; color: var(--coral-dark); }
.app-nav.is-targeted { box-shadow: inset 0 0 0 1px rgba(244,99,66,.35); }
.nav-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--mint); }
.app-profile { display: flex; align-items: center; gap: 7px; margin-top: auto; border-top: 1px solid var(--app-border); padding: 13px 5px 0; }
.app-profile > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #2e3933; color: white; font-size: 7px; font-weight: 700; }
.app-profile div { display: flex; min-width: 0; flex-direction: column; }
.app-profile b { font-size: 7px; }
.app-profile small { color: #96a09a; font-size: 5px; }
.app-profile > i { width: 4px; height: 4px; margin-left: auto; border-radius: 50%; background: var(--mint); }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-topbar { height: 53px; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--app-border); background: white; padding: 0 18px; }
.app-topbar > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.app-topbar small { color: #a1aaa4; font-family: var(--mono); font-size: 5px; letter-spacing: .09em; }
.app-topbar b { color: #28332d; font-size: 10px; }
.app-top-actions { display: flex; align-items: center; gap: 7px; }
.search-button { display: flex; height: 28px; align-items: center; gap: 6px; border: 1px solid var(--app-border); border-radius: 6px; background: var(--app-bg); color: #99a29d; padding: 0 7px; font-size: 6px; }
.search-button svg { width: 10px; height: 10px; }
.search-button kbd { margin-left: 18px; border: 1px solid var(--app-border); border-radius: 3px; background: white; padding: 1px 3px; font-family: var(--mono); font-size: 5px; }
.top-icon { position: relative; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--app-border); border-radius: 6px; background: white; color: #7c8680; }
.top-icon svg { width: 12px; height: 12px; }
.top-icon i { position: absolute; width: 4px; height: 4px; top: 4px; right: 5px; border-radius: 50%; background: var(--coral); }
.app-new-button { display: flex; height: 29px; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: var(--coral); color: white; padding: 0 10px; font-size: 7px; font-weight: 700; box-shadow: 0 4px 10px rgba(244,99,66,.18); }
.app-new-button svg { width: 10px; height: 10px; }
.app-new-button.is-targeted { box-shadow: 0 0 0 3px rgba(244,99,66,.22), 0 4px 10px rgba(244,99,66,.2); transform: scale(.97); }
.app-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 24px; background: var(--app-bg); }

/* App canvas primitives */
.app-page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.app-page-head h3 { margin: 0; color: #26312b; font-size: 17px; letter-spacing: -.035em; }
.app-page-head p { margin: 4px 0 0; color: #909a94; font-size: 7px; }
.date-chip { border: 1px solid var(--app-border); border-radius: 6px; background: white; padding: 7px 9px; color: #707b74; font-family: var(--mono); font-size: 6px; }
.dash-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.app-card { border: 1px solid var(--app-border); border-radius: 10px; background: white; box-shadow: 0 3px 10px rgba(31,42,36,.025); }
.schedule-card { padding: 16px; }
.app-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.app-card-head b { color: #35403a; font-size: 8px; }
.app-card-head span { color: var(--coral); font-size: 6px; font-weight: 700; }
.schedule-row { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #edf0ec; }
.schedule-row > span { color: #89938d; font-family: var(--mono); font-size: 6px; }
.schedule-row div { display: flex; flex-direction: column; gap: 3px; }
.schedule-row b { color: #3d4842; font-size: 7px; }
.schedule-row small { color: #9aa39e; font-size: 5px; }
.mini-platforms { display: flex !important; flex-direction: row !important; gap: 3px !important; }
.mini-platforms i { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 4px; color: white; font-size: 4px; font-style: normal; font-weight: 800; }
.week-card { padding: 16px; }
.week-number { margin-top: 20px; color: #26312b; font-size: 34px; font-weight: 750; letter-spacing: -.06em; }
.week-card > small { color: #9aa39e; font-size: 6px; }
.week-bars { height: 75px; display: flex; align-items: end; gap: 6px; margin-top: 18px; }
.week-bars i { flex: 1; border-radius: 3px 3px 0 0; background: #dce4de; }
.week-bars i:nth-child(1) { height: 35%; }
.week-bars i:nth-child(2) { height: 64%; }
.week-bars i:nth-child(3) { height: 47%; }
.week-bars i:nth-child(4) { height: 82%; background: var(--coral); }
.week-bars i:nth-child(5) { height: 72%; }
.week-bars i:nth-child(6) { height: 93%; }
.week-bars i:nth-child(7) { height: 55%; }
.insight-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; overflow: hidden; background: var(--app-border); }
.insight-strip > div { background: white; padding: 13px; }
.insight-strip span { display: block; color: #9ba49f; font-size: 5px; }
.insight-strip b { display: block; margin-top: 5px; color: #303b35; font-size: 13px; letter-spacing: -.04em; }
.insight-strip small { color: var(--mint); font-size: 5px; }

.composer-overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; background: rgba(32,43,37,.28); opacity: 0; backdrop-filter: blur(1.5px); transition: opacity .25s; }
.composer-overlay.is-open { opacity: 1; }
.composer-modal { width: min(700px, calc(100% - 50px)); max-height: calc(100% - 36px); overflow: hidden; border: 1px solid var(--app-border); border-radius: 12px; background: white; box-shadow: 0 24px 55px rgba(27,39,32,.22); transform: translateY(18px) scale(.98); transition: transform .3s var(--ease); }
.composer-overlay.is-open .composer-modal { transform: none; }
.composer-head { height: 47px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--app-border); padding: 0 16px; }
.composer-head b { font-size: 10px; }
.composer-head button { border: 0; background: transparent; color: #88928c; }
.composer-grid { display: grid; grid-template-columns: 1.16fr .84fr; min-height: 390px; }
.composer-fields { padding: 16px; border-right: 1px solid var(--app-border); }
.field-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: #7d8781; font-size: 6px; font-weight: 700; }
.field-label span:last-child { color: #a0a8a3; font-family: var(--mono); font-weight: 400; }
.platform-picks { display: flex; gap: 6px; margin-bottom: 15px; }
.platform-pick { display: flex; height: 29px; align-items: center; gap: 5px; border: 1px solid var(--app-border); border-radius: 6px; background: white; color: #727c76; padding: 0 8px; font-size: 6px; transition: all .2s; }
.platform-pick i { display: grid; width: 14px; height: 14px; place-items: center; border-radius: 4px; color: white; font-size: 4px; font-style: normal; font-weight: 800; }
.platform-pick.is-selected { border-color: rgba(244,99,66,.45); background: var(--coral-soft); color: var(--coral-dark); }
.post-textarea { min-height: 105px; border: 1px solid var(--app-border); border-radius: 7px; background: var(--app-bg); padding: 10px; color: #37423c; font-size: 7px; line-height: 1.55; white-space: pre-wrap; }
.post-textarea.is-focused { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(244,99,66,.09); background: white; }
.attach-row { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.attach-thumb { width: 48px; height: 41px; overflow: hidden; border-radius: 6px; background: linear-gradient(140deg,#315bef 0%,#8da4ff 34%,#f46342 35%,#f8b069 100%); }
.attach-thumb::after { content: 'LAUNCH'; display: grid; height: 100%; place-items: center; color: white; font-family: var(--mono); font-size: 5px; letter-spacing: .1em; }
.attach-button { display: grid; width: 41px; height: 41px; place-items: center; border: 1px dashed #cfd5cf; border-radius: 6px; color: #9ca59f; font-size: 14px; }
.composer-preview { padding: 16px; background: #fafbf9; }
.preview-tabs { display: flex; gap: 12px; margin-bottom: 12px; color: #9aa39e; font-size: 6px; }
.preview-tabs span:first-child { color: var(--coral); font-weight: 700; }
.preview-post { overflow: hidden; border: 1px solid var(--app-border); border-radius: 9px; background: white; }
.preview-user { display: flex; align-items: center; gap: 6px; padding: 10px; }
.preview-avatar { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #24312a; color: white; font-size: 5px; }
.preview-user div { display: flex; flex-direction: column; }
.preview-user b { font-size: 6px; }
.preview-user small { color: #9ca59f; font-size: 5px; }
.preview-media { display: grid; height: 155px; place-items: center; background: linear-gradient(145deg,#274ee3 0 45%,#f46342 45% 68%,#ffbc77 68%); color: white; }
.preview-media b { border: 1px solid rgba(255,255,255,.45); padding: 7px 9px; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.preview-caption { padding: 10px; color: #4b5550; font-size: 5.5px; line-height: 1.5; }
.composer-actions { height: 51px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--app-border); padding: 0 16px; }
.composer-actions > button { height: 28px; border-radius: 6px; font-size: 6px; font-weight: 700; }
.draft-button { border: 1px solid var(--app-border); background: white; color: #6f7973; padding: 0 10px; }
.action-buttons { display: flex; gap: 6px; }
.schedule-button { border: 0; background: var(--coral); color: white; padding: 0 12px; }
.schedule-button.is-targeted { box-shadow: 0 0 0 3px rgba(244,99,66,.18); transform: scale(.97); }
.publish-button { border: 1px solid var(--app-border); background: white; color: #606b64; padding: 0 10px; }
.app-toast { position: absolute; z-index: 8; right: 18px; bottom: 18px; display: flex; width: 230px; align-items: center; gap: 9px; border: 1px solid #bde0cd; border-radius: 8px; background: white; padding: 10px; box-shadow: 0 12px 30px rgba(28,43,35,.14); opacity: 0; transform: translateY(12px); transition: all .28s var(--ease); }
.app-toast.is-visible { opacity: 1; transform: none; }
.toast-check { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--mint-soft); color: var(--mint); font-size: 9px; }
.app-toast div { display: flex; flex-direction: column; }
.app-toast b { font-size: 7px; }
.app-toast small { color: #8d9791; font-size: 5px; }

/* Telegram approval demo */
.telegram-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 12px; height: calc(100% - 52px); }
.telegram-phone { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: #dcebf4; box-shadow: inset 0 0 0 1px #c4d7e2; }
.tg-head { display: flex; height: 48px; align-items: center; gap: 8px; background: white; padding: 0 12px; }
.tg-avatar { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #399ed6; color: white; font-size: 7px; font-weight: 700; }
.tg-head div { display: flex; flex-direction: column; }
.tg-head b { font-size: 7px; }
.tg-head small { color: var(--mint); font-size: 5px; }
.tg-chat { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 12px; }
.tg-message { max-width: 82%; border-radius: 8px 8px 8px 2px; background: white; padding: 8px; color: #4b5650; font-size: 6px; line-height: 1.5; box-shadow: 0 2px 6px rgba(45,70,56,.07); opacity: 0; transform: translateY(7px); transition: all .25s var(--ease); }
.tg-message.is-visible { opacity: 1; transform: none; }
.tg-message.user { align-self: flex-end; border-radius: 8px 8px 2px 8px; background: #d8f5ca; }
.tg-media { height: 73px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 6px; background: linear-gradient(145deg,#304dd2,#6e88ed 48%,#f46342 49%); color: white; font-family: var(--mono); font-size: 6px; }
.tg-input { display: flex; height: 40px; align-items: center; margin: 0 8px 8px; border-radius: 8px; background: white; color: #a1aaa4; padding: 0 10px; font-size: 6px; }
.approval-board { overflow: hidden; padding: 16px; }
.approval-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 13px; }
.approval-summary div { border: 1px solid var(--app-border); border-radius: 7px; padding: 9px; background: white; }
.approval-summary span { display: block; color: #9aa39e; font-size: 5px; }
.approval-summary b { display: block; margin-top: 4px; font-size: 11px; }
.approval-card { border: 1px solid var(--app-border); border-radius: 9px; background: white; opacity: 0; transform: translateY(10px); transition: all .35s var(--ease); }
.approval-card.is-visible { opacity: 1; transform: none; }
.approval-card-head { display: flex; align-items: center; gap: 8px; padding: 11px; border-bottom: 1px solid var(--app-border); }
.approval-card-head .avatar { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #293731; color: white; font-size: 6px; }
.approval-card-head > div { display: flex; flex-direction: column; }
.approval-card-head b { font-size: 7px; }
.approval-card-head small { color: #919b95; font-size: 5px; }
.approval-card-head > span { margin-left: auto; border-radius: 99px; background: #fff4dd; color: var(--amber); padding: 4px 7px; font-size: 5px; font-weight: 700; }
.approval-content { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 11px; }
.approval-media { display: grid; height: 105px; place-items: center; border-radius: 7px; background: linear-gradient(155deg,#274dd2 0 55%,#f46342 55%); color: white; font-family: var(--mono); font-size: 6px; }
.approval-copy { display: flex; flex-direction: column; }
.approval-copy b { font-size: 7px; }
.approval-copy p { margin: 6px 0; color: #68736c; font-size: 6px; line-height: 1.5; }
.approval-copy small { color: #9ba49f; font-size: 5px; }
.approval-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 0 11px 11px; }
.approval-actions button { height: 26px; border-radius: 6px; padding: 0 10px; font-size: 6px; font-weight: 700; }
.reject-button { border: 1px solid var(--app-border); background: white; color: #69746d; }
.approve-button { border: 0; background: var(--mint); color: white; }
.approve-button.is-targeted { box-shadow: 0 0 0 3px rgba(54,168,115,.18); transform: scale(.97); }
.approval-card.is-approved { border-color: #addac2; }
.approval-card.is-approved .approval-card-head > span { background: var(--mint-soft); color: var(--mint); }

/* Calendar demo */
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.calendar-toolbar > div { display: flex; gap: 5px; }
.calendar-toolbar button { height: 26px; border: 1px solid var(--app-border); border-radius: 5px; background: white; color: #707a74; padding: 0 8px; font-size: 6px; }
.calendar-shell { overflow: hidden; border: 1px solid var(--app-border); border-radius: 9px; background: white; }
.calendar-weekdays, .calendar-demo-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.calendar-weekdays span { padding: 8px; border-right: 1px solid var(--app-border); color: #9aa39e; font-family: var(--mono); font-size: 5px; }
.calendar-weekdays span:last-child { border: 0; }
.calendar-demo-grid { border-top: 1px solid var(--app-border); }
.calendar-cell { position: relative; height: 99px; overflow: hidden; border-right: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); padding: 8px; background: white; transition: background .2s, box-shadow .2s; }
.calendar-cell:nth-child(7n) { border-right: 0; }
.calendar-cell:nth-last-child(-n+7) { border-bottom: 0; }
.calendar-cell > b { color: #68736c; font-family: var(--mono); font-size: 6px; font-weight: 500; }
.calendar-cell.is-muted > b { color: #c6cbc7; }
.calendar-cell.is-today > b { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; background: var(--coral); color: white; }
.calendar-cell.is-targeted { z-index: 1; background: var(--coral-soft); box-shadow: inset 0 0 0 2px var(--coral); }
.cal-event { display: block; margin-top: 5px; overflow: hidden; border-left: 2px solid var(--cobalt); border-radius: 3px; background: var(--cobalt-soft); padding: 4px; color: #4c5ca2; font-size: 5px; white-space: nowrap; text-overflow: ellipsis; }
.cal-event.coral { border-color: var(--coral); background: var(--coral-soft); color: #a84b35; }
.cal-event.mint { border-color: var(--mint); background: var(--mint-soft); color: #39765a; }
.quick-compose { position: absolute; z-index: 6; width: 275px; border: 1px solid var(--app-border); border-radius: 9px; background: white; box-shadow: 0 17px 40px rgba(25,38,31,.2); padding: 12px; opacity: 0; transform: translateY(8px) scale(.98); transition: all .28s var(--ease); }
.quick-compose.is-visible { opacity: 1; transform: none; }
.quick-compose-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.quick-compose-head b { font-size: 7px; }
.quick-compose-head small { color: var(--coral); font-family: var(--mono); font-size: 5px; }
.quick-input { min-height: 50px; border: 1px solid var(--app-border); border-radius: 6px; background: var(--app-bg); padding: 8px; color: #46514b; font-size: 6px; line-height: 1.45; }
.quick-row { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.quick-row > div { display: flex; gap: 4px; }
.quick-row button { height: 25px; border: 0; border-radius: 5px; background: var(--coral); color: white; padding: 0 9px; font-size: 6px; font-weight: 700; }
.quick-row button.is-targeted { box-shadow: 0 0 0 3px rgba(244,99,66,.18); transform: scale(.97); }

/* Analytics demo */
.analytics-filters { display: flex; align-items: center; gap: 6px; }
.analytics-chip { height: 26px; border: 1px solid var(--app-border); border-radius: 99px; background: white; color: #7b857f; padding: 0 9px; font-size: 6px; }
.analytics-chip.is-active { border-color: var(--coral); background: var(--coral-soft); color: var(--coral-dark); }
.analytics-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.metric-card { padding: 13px; }
.metric-card span { color: #939d97; font-size: 6px; }
.metric-card b { display: block; margin: 7px 0 2px; color: #2c3731; font-size: 21px; letter-spacing: -.05em; }
.metric-card small { color: var(--mint); font-size: 5px; }
.chart-card { grid-column: 1 / span 2; padding: 14px; }
.chart-area { position: relative; height: 150px; margin-top: 12px; overflow: hidden; background: repeating-linear-gradient(to bottom, transparent 0,transparent 36px,#edf0ed 37px); }
.chart-area svg { width: 100%; height: 100%; overflow: visible; }
.chart-area .area { fill: url(#chartFill); stroke: none; }
.chart-area .line { fill: none; stroke: var(--coral); stroke-width: 2; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 2s var(--ease); }
.chart-card.is-drawn .line { stroke-dashoffset: 0; }
.chart-point { position: absolute; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 1px var(--coral); opacity: 0; transition: opacity .2s; }
.chart-point.is-visible { opacity: 1; }
.chart-tooltip { position: absolute; width: 90px; border-radius: 6px; background: #26312b; color: white; padding: 7px; opacity: 0; transform: translateY(6px); transition: all .2s; }
.chart-tooltip.is-visible { opacity: 1; transform: none; }
.chart-tooltip b { display: block; font-size: 7px; }
.chart-tooltip small { color: #aeb8b2; font-size: 5px; }
.posts-card { padding: 14px; }
.post-rank { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: center; padding: 10px 0; border-top: 1px solid var(--app-border); }
.post-rank:first-of-type { margin-top: 10px; }
.post-rank > span { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 4px; background: var(--paper-2); color: #7d8781; font-family: var(--mono); font-size: 5px; }
.post-rank div { display: flex; min-width: 0; flex-direction: column; }
.post-rank b { overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.post-rank small { color: #99a29d; font-size: 5px; }
.post-rank > b { color: #37423c; font-family: var(--mono); font-size: 6px; }
.post-rank.is-targeted { margin-inline: -6px; border-radius: 5px; background: var(--coral-soft); padding-inline: 6px; }

/* Demo cursor and tape */
.fake-cursor { position: absolute; z-index: 20; left: 0; top: 0; width: 19px; height: 23px; pointer-events: none; opacity: 0; transform: translate3d(470px,260px,0); transition: transform .72s cubic-bezier(.2,.82,.2,1), opacity .2s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.fake-cursor.is-visible { opacity: 1; }
.fake-cursor svg { width: 19px; height: 23px; fill: white; stroke: #111814; stroke-width: 1.4; }
.fake-cursor > span { position: absolute; top: 18px; left: 16px; border-radius: 4px; background: #17201c; color: white; padding: 4px 6px; font-family: var(--mono); font-size: 5.5px; white-space: nowrap; opacity: 0; transform: translateY(3px); transition: all .2s; }
.fake-cursor.has-label > span { opacity: 1; transform: none; }
.fake-cursor > i { position: absolute; width: 14px; height: 14px; left: -4px; top: -3px; border: 1.5px solid var(--coral); border-radius: 50%; opacity: 0; }
.fake-cursor.is-clicking > i { animation: cursorClick .45s ease-out; }
@keyframes cursorClick { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(2.1); } }
.action-tape { min-height: 68px; display: grid; grid-template-columns: 180px 1fr 100px; align-items: center; gap: 24px; padding: 0 20px; background: #17201c; color: white; }
.tape-meta { display: flex; flex-direction: column; gap: 5px; }
.tape-meta span { color: #7e8d85; font-family: var(--mono); font-size: 6px; letter-spacing: .15em; }
.tape-meta b { font-size: 9px; }
.action-tape ol { display: flex; min-width: 0; gap: 8px; margin: 0; padding: 0; list-style: none; }
.action-tape li { display: flex; min-width: 0; align-items: center; gap: 6px; color: #697970; font-size: 7px; transition: color .2s; }
.action-tape li:not(:last-child)::after { content: '›'; margin-left: 2px; color: #445149; }
.action-tape li i { width: 5px; height: 5px; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; }
.action-tape li.is-complete { color: #8da096; }
.action-tape li.is-complete i { border-color: var(--mint); background: var(--mint); }
.action-tape li.is-active { color: white; }
.action-tape li.is-active i { border-color: var(--coral); background: var(--coral); box-shadow: 0 0 0 4px rgba(244,99,66,.14); }
.tape-time { justify-self: end; color: #718078; font-family: var(--mono); font-size: 6px; }
.demo-progress { height: 2px; background: #2b3731; }
.demo-progress i { display: block; width: 0; height: 100%; background: var(--coral); }
.demo-caption { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0; color: var(--ink-3); font-family: var(--mono); font-size: 8px; text-align: center; }
.demo-caption span { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }

/* Local control */
.control-section { padding: 130px 0; border-top: 1px solid var(--line); background: var(--paper-2); }
.control-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(70px,9vw,140px); align-items: center; }
.control-copy > p:not(.kicker) { max-width: 535px; margin: 29px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.control-facts { margin: 38px 0 0; border-top: 1px solid var(--line-dark); }
.control-facts > div { display: grid; grid-template-columns: 145px 1fr; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.control-facts dt { font-family: var(--mono); font-size: 9px; font-weight: 500; }
.control-facts dd { margin: 0; color: var(--ink-3); font-size: 11px; }
.control-console { overflow: hidden; border: 1px solid #3d4942; border-radius: 14px; background: #131b17; box-shadow: 0 32px 65px rgba(23,32,28,.2); color: white; transform: rotate(-.55deg); }
.console-head { height: 42px; display: flex; align-items: center; border-bottom: 1px solid #2b3731; padding: 0 15px; }
.console-head > span { display: flex; gap: 6px; }
.console-head > span i { width: 7px; height: 7px; border-radius: 50%; background: #48574f; }
.console-head b { margin: 0 auto; color: #829188; font-family: var(--mono); font-size: 7px; font-weight: 400; }
.console-head em { border: 1px solid #385745; border-radius: 4px; color: #60ba83; padding: 3px 6px; font-family: var(--mono); font-size: 5px; font-style: normal; }
.console-body { padding: 25px; border-bottom: 1px solid #2b3731; }
.console-body p { display: flex; align-items: center; gap: 13px; margin: 0 0 13px; color: #a4b1aa; font-family: var(--mono); font-size: 8px; }
.console-body p:last-child { margin-bottom: 0; }
.console-body span { color: #56665d; }
.console-body b { min-width: 55px; color: #e1e9e4; font-weight: 400; }
.console-body .console-live { color: #d9e6de; }
.console-live i { width: 6px; height: 11px; margin-left: -8px; background: #62bb85; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.console-map { display: flex; height: 190px; align-items: center; justify-content: center; gap: 0; padding: 20px; }
.console-map > i { position: relative; width: 70px; height: 1px; background: #425249; }
.console-map > i::after { content: ''; position: absolute; width: 5px; height: 5px; top: -2px; border-radius: 50%; background: var(--coral); animation: packet 2.4s linear infinite; }
.console-map > i:nth-of-type(2)::after { animation-delay: 1.2s; }
@keyframes packet { from { left: 0; } to { left: 100%; } }
.map-node { display: flex; width: 73px; height: 73px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid #39463f; border-radius: 50%; background: #1a241f; }
.map-node span:not(.app-mark) { font-family: var(--mono); font-size: 8px; }
.map-node small { color: #6c7b73; font-family: var(--mono); font-size: 5px; }
.app-mark.mini { width: 26px; height: 26px; }
.map-channels { display: flex; gap: 4px; }
.map-channels .channel-icon { width: 28px; height: 28px; }

/* Details and download */
.details-section { padding: 130px 0 105px; background: var(--white); }
.section-intro.compact { display: block; margin-bottom: 55px; }
.section-intro.compact .kicker { margin-bottom: 18px; }
.detail-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-card { min-height: 275px; border-right: 1px solid var(--line); padding: 27px 34px 32px 0; }
.detail-card + .detail-card { padding-left: 34px; }
.detail-card:last-child { border-right: 0; }
.detail-number { color: var(--coral); font-family: var(--mono); font-size: 9px; }
.detail-card h3 { margin: 63px 0 13px; font-size: 22px; letter-spacing: -.04em; }
.detail-card p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.7; }
.detail-card code { border-radius: 4px; background: var(--paper-2); padding: 2px 4px; font-family: var(--mono); font-size: 10px; }
.download-panel { position: relative; min-height: 390px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; margin-top: 105px; overflow: hidden; border-radius: 18px; background: var(--ink); color: white; padding: 65px 70px; }
.download-panel .kicker { color: #86958d; }
.download-panel h2 { max-width: 620px; font-size: clamp(42px,4.7vw,67px); }
.download-side { position: relative; z-index: 2; justify-self: end; display: flex; flex-direction: column; align-items: flex-start; }
.download-side p { margin: 14px 0 0; color: #7e8d85; font-family: var(--mono); font-size: 7px; line-height: 1.7; }
.download-orbit { position: absolute; width: 520px; height: 520px; right: -230px; top: -70px; display: grid; place-items: center; border: 1px solid #354139; border-radius: 50%; }
.download-orbit::before, .download-orbit::after { content: ''; position: absolute; border: 1px solid #303c35; border-radius: 50%; }
.download-orbit::before { inset: 65px; }
.download-orbit::after { inset: 130px; }
.download-orbit > i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.download-orbit > i:first-child { left: 52px; top: 82px; }
.download-orbit > i:nth-child(2) { left: 138px; bottom: 32px; background: var(--cobalt); }
.download-orbit > i:nth-child(3) { right: 123px; top: 39px; background: var(--mint); }
.brand-beat.large { height: 50px; gap: 5px; color: var(--coral); }
.brand-beat.large > i { width: 7px; height: 20px; }
.brand-beat.large > i:nth-child(2) { height: 44px; }
.brand-beat.large > i:nth-child(3) { height: 28px; }
.brand-beat.large > i:nth-child(4) { height: 36px; }
.faq { max-width: 850px; margin: 90px auto 0; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; min-height: 75px; align-items: center; justify-content: space-between; gap: 25px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.faq summary span::before, .faq summary span::after { content: ''; position: absolute; left: 2px; top: 7px; width: 12px; height: 1px; background: var(--ink); transition: transform .2s; }
.faq summary span::after { transform: rotate(90deg); }
.faq details[open] summary span::after { transform: rotate(0); }
.faq details p { max-width: 700px; margin: -5px 0 27px; color: var(--ink-2); font-size: 13px; line-height: 1.75; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--paper); }
.footer-main { min-height: 155px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.footer-main > p { justify-self: center; color: var(--ink-3); font-size: 11px; }
.back-top { justify-self: end; display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); text-decoration: none; font-size: 11px; font-weight: 700; }
.back-top span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; transition: transform .2s, background .2s; }
.back-top:hover span { transform: translateY(-3px); background: white; }
.footer-bottom { display: flex; min-height: 54px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--ink-3); font-family: var(--mono); font-size: 7px; }
.download-toast { position: fixed; z-index: 150; right: 24px; bottom: 24px; display: flex; width: min(370px,calc(100vw - 48px)); align-items: center; gap: 13px; border: 1px solid #bfc9c1; border-radius: 11px; background: white; padding: 14px 16px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(20px); transition: all .3s var(--ease); }
.download-toast.is-visible { opacity: 1; transform: none; }
.download-toast > span { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; gap: 2px; border-radius: 7px; background: var(--coral); color: white; }
.download-toast > span i { width: 2px; height: 7px; border-radius: 2px; background: currentColor; }
.download-toast > span i:nth-child(2) { height: 17px; }
.download-toast > span i:nth-child(3) { height: 10px; }
.download-toast > span i:nth-child(4) { height: 14px; }
.download-toast div { display: flex; flex-direction: column; gap: 3px; }
.download-toast b { font-size: 11px; }
.download-toast small { color: var(--ink-3); font-size: 8px; }

/* Reveal and focus */
.reveal { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .22s; }
.reveal.is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.workflow-tab:focus-visible { z-index: 2; outline-offset: -3px; }

/* Responsive */
@media (max-width: 1080px) {
  :root { --shell: min(100% - 42px, 1080px); }
  .desktop-nav, .desktop-only { display: none; }
  .menu-button { display: block; }
  .mobile-menu { position: absolute; top: 72px; left: 0; right: 0; display: grid; gap: 0; border-bottom: 1px solid var(--line); background: rgba(245,246,241,.97); padding: 8px 16px 15px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: all .2s; backdrop-filter: blur(16px); }
  .mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .mobile-menu a { border-bottom: 1px solid var(--line); padding: 14px 4px; color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 650; }
  .hero { padding-top: 130px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 45px; }
  .hero h1 { font-size: clamp(50px,7.4vw,76px); }
  .platform-list { gap: 16px; }
  .platform-list > span { font-size: 10px; }
  .demo-body { grid-template-columns: 150px 1fr; height: 575px; }
  .app-sidebar { padding-inline: 8px; }
  .app-canvas { padding: 18px; }
  .action-tape { grid-template-columns: 155px 1fr 75px; gap: 12px; padding-inline: 15px; }
  .action-tape li { font-size: 6px; }
  .control-grid { grid-template-columns: 1fr 1.2fr; gap: 60px; }
  .download-panel { padding: 55px 50px; }
}

@media (max-width: 820px) {
  :root { --shell: min(100% - 32px, 760px); }
  .site-header { height: 64px; }
  .mobile-menu { top: 64px; }
  .hero { padding-top: 118px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-proof { max-width: 620px; margin-top: 22px; transform: rotate(.5deg); }
  .hero-rule { margin-top: 70px; }
  .platform-inner { align-items: flex-start; flex-direction: column; }
  .platform-list { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .section-intro { display: block; }
  .section-intro > p:last-child { margin: 23px 0 0; }
  .workflow-section, .control-section, .details-section { padding-block: 90px; }
  .workflow-selector { grid-template-columns: repeat(2,1fr); }
  .workflow-tab:nth-child(2) { border-right: 0; }
  .workflow-tab:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .demo-wrap { overflow-x: auto; }
  .demo-topline, .demo-body, .action-tape, .demo-progress { min-width: 780px; }
  .demo-body { height: 560px; }
  .demo-caption { line-height: 1.6; }
  .control-grid { grid-template-columns: 1fr; }
  .control-console { max-width: 670px; transform: none; }
  .detail-card { padding-inline: 0 20px; }
  .detail-card + .detail-card { padding-left: 20px; }
  .download-panel { grid-template-columns: 1fr; gap: 40px; padding: 48px 40px; }
  .download-side { justify-self: start; }
  .download-orbit { opacity: .55; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100% - 24px); }
  .nav-actions { gap: 8px; }
  .nav-actions .button-small { min-height: 36px; padding-inline: 12px; font-size: 11px; }
  .hero h1 { font-size: clamp(48px,16vw,68px); }
  .hero-lede { font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-proof { padding: 10px; }
  .proof-foot { align-items: flex-start; flex-direction: column; gap: 5px; }
  .proof-intro { padding: 16px; }
  .channel-line { padding: 14px 16px; }
  .cal-day { min-height: 68px; padding: 7px 5px; }
  .platform-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px 10px; }
  .platform-list > span { font-size: 9px; }
  .section-intro h2, .control-copy h2 { font-size: 44px; }
  .workflow-selector { display: flex; overflow-x: auto; border: 0; gap: 8px; scroll-snap-type: x mandatory; }
  .workflow-tab { min-width: 210px; min-height: 105px; border: 1px solid var(--line) !important; border-radius: 8px; scroll-snap-align: start; }
  .workflow-tab.is-active { border-color: var(--coral) !important; }
  .demo-wrap { margin-inline: -12px; border-radius: 10px; }
  .demo-caption { padding-inline: 8px; font-size: 7px; }
  .control-facts > div { grid-template-columns: 130px 1fr; }
  .console-body { padding: 20px 15px; }
  .console-body p { gap: 8px; font-size: 6px; }
  .console-map > i { width: 35px; }
  .detail-grid { display: block; border: 0; }
  .detail-card, .detail-card + .detail-card { min-height: 0; border: 0; border-top: 1px solid var(--line); padding: 25px 0 30px; }
  .detail-card:last-child { border-bottom: 1px solid var(--line); }
  .detail-card h3 { margin-top: 28px; }
  .download-panel { min-height: 440px; margin-top: 70px; padding: 38px 25px; }
  .download-panel h2 { font-size: 41px; }
  .download-orbit { right: -330px; }
  .footer-main { grid-template-columns: 1fr auto; min-height: 130px; }
  .footer-main > p { display: none; }
  .footer-bottom { min-height: 65px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; }
  .download-toast { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* Full platform matrix */
.platform-inner-full { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; padding-block: 10px }
.platform-heading { position: sticky; top: 92px; padding-top: 3px }
.platform-heading p { margin: 0 0 8px; color: var(--ink-3); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase }
.platform-heading strong { font-size: 18px; letter-spacing: -.035em }
.platform-content-wrap { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.platform-list-full { display: grid; grid-template-columns: repeat(4, minmax(130px,1fr)); gap: 11px; width: 100%; }
.platform-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.7); padding: 7px 12px; cursor: pointer; transition: transform .2s var(--ease), border-color .2s, background .2s, box-shadow .2s; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--ink-2); text-align: left; }
.platform-chip span { flex: 1; }
.platform-chip::after { content: '+'; font-family: var(--mono); font-size: 11px; color: var(--ink-3); transition: transform 0.2s; }
.platform-chip:hover { transform: translateY(-2px); border-color: var(--line-dark); background: white; color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.platform-chip.active { border-color: var(--ink); background: white; color: var(--ink); box-shadow: 0 4px 15px rgba(0,0,0,.08); }
.platform-chip.active::after { content: '−'; font-weight: 800; color: var(--ink); }
.platform-mark.youtube { background: #ff0000; }
.platform-mark.tiktok, .platform-mark.threads, .platform-mark.x { background: #111111; }
.platform-mark.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.platform-mark.facebook { background: #1877f2; }
.platform-mark.reddit { background: #ff4500; }
.platform-mark.snapchat { background: #fffc00; }
.platform-mark.discord { background: #5865f2; }
.platform-mark.telegram { background: #229ed9; }
.platform-mark.whop { background: #ff6243; }
.platform-mark.shopify { background: #ffffff; border: 1px solid rgba(0,0,0,0.12); }
.platform-mark.linkedin { background: #0a66c2; }
.platform-mark.pinterest { background: #e60023; }
.platform-mark.slack { background: #ffffff; border: 1px solid rgba(0,0,0,0.12); }
.platform-mark.whatsapp { background: #25d366; }
.platform-note { grid-column: 2; margin: 5px 0 0; color: var(--ink-3); font-family: var(--mono); font-size: 7px }

/* Pricing */
.pricing-section { padding: 42px 0; border-top: 1px solid var(--line); background: var(--paper) }
.pricing-head { display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:22px }.pricing-head h2{margin:0;font-size:clamp(28px,3.2vw,44px);line-height:1.08;letter-spacing:-.05em}.pricing-head p{max-width:510px;margin:0 0 4px;color:var(--ink-2);font-size:14px;line-height:1.6}
.pricing-toggle-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.pricing-toggle{display:inline-flex;background:rgba(0,0,0,.06);border-radius:99px;padding:4px;gap:3px}
.toggle-opt{border:0;background:transparent;padding:7px 16px;border-radius:99px;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .2s var(--ease)}
.toggle-opt.active{background:var(--ink);color:white;box-shadow:0 3px 10px rgba(0,0,0,.15)}
.toggle-opt span{color:var(--mint);font-size:9px;font-weight:700}
.toggle-opt.active span{color:#6ee7b7}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pricing-grid-5{grid-template-columns:repeat(5,1fr)}
.price-card{position:relative;display:flex;min-height:480px;flex-direction:column;border-right:1px solid var(--line);background:rgba(255,255,255,.32);padding:24px 20px 24px}.price-card:last-child{border-right:0}.price-card-featured{z-index:2;margin:-12px 0;border:1px solid var(--ink);border-radius:12px;background:var(--ink);color:white;box-shadow:0 24px 55px rgba(23,32,28,.16);padding-top:36px}.price-ribbon{position:absolute;top:12px;right:12px;border-radius:99px;background:var(--coral);color:white;padding:4px 8px;font-family:var(--mono);font-size:6px;letter-spacing:.08em;text-transform:uppercase}.price-ribbon-agency{background:#10b981!important}
.price-card-head{display:flex;align-items:center;justify-content:space-between}.price-card-head span{font-size:15px;font-weight:800;letter-spacing:-.035em}.price-card-head small{color:var(--ink-3);font-family:var(--mono);font-size:6px}.price-card-featured .price-card-head small{color:#84938b}.price{display:flex;align-items:baseline;gap:8px;margin:22px 0 12px}.price b{font-size:40px;line-height:1;letter-spacing:-.07em}.price span{color:var(--ink-3);font-family:var(--mono);font-size:8px}.price-card>p{min-height:40px;margin:0;color:var(--ink-2);font-size:11px;line-height:1.5}.price-card-featured>p{color:#aab6af}.price-card ul{margin:18px 0 24px;padding:0;list-style:none}.price-card li{position:relative;border-top:1px solid var(--line);padding:9px 0 9px 18px;color:var(--ink-2);font-size:9px}.price-card li::before{content:'✓';position:absolute;left:0;color:var(--mint);font-weight:800}.price-card-featured li{border-color:#303c35;color:#d0d9d3}.price-cta{display:flex;min-height:44px;align-items:center;justify-content:space-between;margin-top:auto;border:1px solid var(--line-dark);border-radius:7px;padding:0 15px;color:var(--ink);text-decoration:none;font-size:9px;font-weight:750;transition:transform .2s,background .2s}.price-cta:hover{transform:translateY(-2px);background:white}.price-cta-primary{border-color:var(--coral);background:var(--coral);color:white}.price-cta-primary:hover{background:var(--coral-dark)}.pricing-note{margin:24px 0 0;color:var(--ink-3);font-family:var(--mono);font-size:7px;text-align:center}

.enterprise-banner{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:linear-gradient(135deg,rgba(91,75,229,.06),rgba(124,58,237,.09));border:1px solid var(--line-dark);border-radius:14px;padding:28px 32px;margin-top:28px}
.enterprise-badge{display:inline-block;background:var(--accent-soft,#ece9fe);color:var(--accent,#5b4be5);font-family:var(--mono);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:99px;margin-bottom:8px}
.enterprise-info h3{margin:0 0 6px;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.enterprise-info p{margin:0;color:var(--ink-2);font-size:12px;line-height:1.6;max-width:720px}
.enterprise-action .button{white-space:nowrap}

.compare-toggle-btn{display:inline-flex;align-items:center;border:1px solid var(--line-dark);border-radius:99px;padding:10px 22px;font-weight:700;font-size:11px;cursor:pointer;transition:all .2s var(--ease)}
.compare-toggle-btn:hover{background:white;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.compare-toggle-btn.is-open .chevron-icon{transform:rotate(180deg)}

.compare-matrix-card{display:none;background:white;border:1px solid var(--line-dark);border-radius:16px;padding:24px;box-shadow:0 12px 35px rgba(0,0,0,.06)}
.compare-matrix-card.is-open{display:block!important;opacity:1!important;visibility:visible!important}
.matrix-header{margin-bottom:20px;text-align:left}
.matrix-header h3{margin:0 0 4px;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.matrix-header p{margin:0;color:var(--ink-2);font-size:12px}

.matrix-scroll-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;border-collapse:collapse;text-align:center;font-size:11px;min-width:760px}
.compare-table th{padding:12px 10px;background:rgba(0,0,0,.03);border-bottom:2px solid var(--line-dark);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.compare-table th.feature-col{text-align:left;width:28%}
.compare-table th.highlight-col,.compare-table td.highlight-col{background:rgba(91,75,229,.05)}

.compare-table td{padding:11px 10px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.compare-table td.feature-name{text-align:left;font-weight:600;color:var(--ink)}
.compare-table tr.cat-row td{background:rgba(0,0,0,.04);text-align:left;font-weight:800;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);padding:9px 12px}

.compare-table .check{color:#10b981;font-weight:800}
.compare-table .cross{color:#d1d5db;font-weight:600}

@media (max-width:1280px){
  .pricing-grid-5{grid-template-columns:repeat(3,1fr)}
  .pricing-grid-5 .price-card:nth-child(3){border-right:0}
}
@media (max-width:1080px){
  .platform-list-full{grid-template-columns:repeat(3,1fr)}
  .pricing-grid,.pricing-grid-5{grid-template-columns:1fr}
  .pricing-toggle-wrap{align-items:flex-start;text-align:left}
  .price-card,.price-card:last-child{min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .price-card-featured{margin:0;border-radius:0}
  .price-card ul{display:grid;grid-template-columns:repeat(2,1fr);column-gap:25px}
  .price-card>p{min-height:0}
  .pricing-head{grid-template-columns:1fr}
  .pricing-head p{margin:0}
  .detail-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:820px){
  .platform-inner-full{grid-template-columns:1fr}
  .platform-heading{position:static}
  .platform-list-full{grid-template-columns:repeat(3,1fr)}
  .platform-note{grid-column:1}
  .pricing-head{gap:25px}
}
/* Platform Detail Drawer Card */
.platform-detail { grid-column: 1 / -1; margin-top: 18px; width: 100%; transition: all 0.3s ease; }
.platform-detail[hidden] { display: none !important; }
.platform-detail-card { background: #ffffff; border: 1px solid var(--line-dark); border-radius: 16px; padding: 24px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06); animation: fadeIn 0.25s ease-out; }
.platform-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.platform-detail-brand { display: flex; align-items: center; gap: 12px; }
.platform-detail-brand h3 { margin: 0 0 3px; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.platform-detail-brand p { margin: 0; font-size: 11px; color: var(--ink-2); }
.platform-detail-close { border: 1px solid var(--line); background: rgba(0,0,0,0.03); border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; transition: background 0.2s; }
.platform-detail-close:hover { background: rgba(0,0,0,0.08); }
.platform-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.platform-detail-col { background: rgba(0,0,0,0.015); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.badge { display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 99px; }
.badge-success { background: rgba(16,185,129,0.1); color: #059669; }
.badge-warning { background: rgba(245,158,11,0.1); color: #d97706; }
.col-head small { font-family: var(--mono); font-size: 8px; color: var(--ink-3); }
.detail-feature-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.detail-feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 11px; color: var(--ink-2); line-height: 1.5; }
.detail-check { color: #10b981; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.detail-cross { color: #f59e0b; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }