@view-transition { navigation: auto; }

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  --bg: #050506;
  --text: #f5f5f7;
  --dim: #86868e;
  --faint: #3a3a40;
  --line: rgba(255, 255, 255, 0.07);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  --accent: #ff5c68;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--text); color: var(--bg); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 8px; }

/* background: dot field (canvas), soft light that trails the pointer, grain */
.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; }
.glow {
  position: fixed; left: 0; top: 0; z-index: -2; pointer-events: none;
  width: 900px; height: 900px; margin: -450px 0 0 -450px;
  background: radial-gradient(closest-side, rgba(255, 92, 104, 0.13), rgba(120, 110, 255, 0.05) 55%, transparent);
  will-change: transform;
}
.grain {
  position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* header */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: center;
  padding: 18px 24px;
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s;
}
.bar.scrolled {
  background: rgba(5, 5, 6, 0.55);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-color: var(--line);
}
.brand { display: inline-flex; align-items: center; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.brand span { color: var(--accent); }

/* product menu under the header */
.subnav {
  position: sticky; top: 74px; z-index: 9;
  width: fit-content; max-width: calc(100% - 32px); margin: 86px auto 0;
  display: flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: 999px;
  background: rgba(20, 20, 24, 0.6); border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  font-size: 15px; font-weight: 600;
}
.subnav a { padding: 8px 16px; border-radius: 999px; color: var(--dim); transition: color 0.3s, background 0.3s; white-space: nowrap; }
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="page"] { background: var(--text); color: var(--bg); }
.subnav .title { display: inline-flex; align-items: center; gap: 9px; color: var(--text); padding-left: 8px; }
.subnav .title img { width: 24px; height: 24px; border-radius: 6px; }
.subnav .sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }

/* hero */
.hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: calc(62px + 13vh) 24px 11vh;
}
.hero.short { padding: 8vh 24px 8vh; }
.hero.solo { flex: 1; justify-content: center; padding: 62px 24px 6vh; }
.hero h1 {
  font-size: clamp(48px, 10vw, 140px);
  line-height: 0.96; letter-spacing: -0.045em; font-weight: 800;
  margin: 0; max-width: 12ch;
}
.hero.short h1, .hero.solo h1 { font-size: clamp(40px, 6.5vw, 88px); max-width: none; }
.lede { font-size: clamp(18px, 2.2vw, 22px); color: var(--dim); margin: 26px 0 0; max-width: 44ch; text-wrap: balance; --d: 900ms; }
.hero .actions { margin-top: 36px; --d: 1050ms; }
.app-icon {
  width: 132px; height: 132px; border-radius: 30px; margin-bottom: 40px;
  box-shadow: 0 30px 90px -20px rgba(255, 92, 104, 0.55), 0 0 0 1px var(--line);
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-12px) rotate(-2deg); } }

/* each word slides up out of a mask; site.js wraps them */
/* padding with matching negative margin: room for overhanging letters (e, g) without changing spacing */
.split .w, .split .wi { display: inline-block; padding: 0.06em 0.1em 0.24em; margin: -0.06em -0.1em -0.24em; }
.split .w { overflow: hidden; vertical-align: top; }
.js .split .wi {
  transform: translateY(110%) rotate(6deg); transform-origin: 0 100%;
  animation: up 1.2s var(--ease) forwards;
  animation-delay: calc(var(--i) * 75ms + 200ms);
}
@keyframes up { to { transform: none; } }
.hero em { font-style: normal; }
/* a light sweeps across the headline, word after word */
.hero h1 .wi {
  --sheen: #ffb4bb;
  background: linear-gradient(100deg, #f5f5f7 30%, var(--sheen) 48%, #f5f5f7 66%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tradewind .hero h1 .wi { --sheen: #f0cd8c; }
.js .hero h1 .wi {
  animation: up 1.2s var(--ease) forwards, sheen 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 75ms + 200ms), calc(var(--i) * 140ms + 1.4s);
}
@keyframes sheen { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }

/* entrance on scroll */
.js .rise {
  opacity: 0; transform: translateY(60px) scale(0.96); filter: blur(10px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .rise.in { opacity: 1; transform: none; filter: none; }

/* sections */
.section { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px 12vh; }
.section > h2 {
  font-size: clamp(36px, 5.5vw, 72px); letter-spacing: -0.05em; line-height: 1;
  margin: 0 0 40px; text-align: center;
}
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); perspective: 1400px; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

/* cards */
.card {
  --x: 50%; --y: 50%; --rx: 0deg; --ry: 0deg; --glow: 255, 255, 255;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: 38px; border-radius: 32px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.card.dashtv, .tile { --glow: 255, 92, 104; }
.card.tradewind { --glow: 222, 178, 92; }
.card.app { min-height: 380px; }
.js .card.rise.in {
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms;
}
.js .card.rise.in.tilting { transition: transform 0.15s linear; }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(600px circle at var(--x) var(--y), rgba(var(--glow), 0.14), transparent 45%);
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(380px circle at var(--x) var(--y), rgba(var(--glow), 0.75), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card:hover::before, .card:hover::after { opacity: 1; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card.app img {
  width: 84px; height: 84px; border-radius: 21px;
  box-shadow: 0 20px 60px -16px rgba(var(--glow), 0.45);
  transition: transform 0.7s var(--ease);
}
.card.app:hover img { transform: translateY(-6px) rotate(-4deg) scale(1.06); }
.card h2 { margin: 22px 0 0; font-size: 38px; letter-spacing: -0.04em; line-height: 1.05; }
.card h3 { margin: 8px 0 0; font-size: 23px; letter-spacing: -0.025em; line-height: 1.2; }
.card p { margin: 0; color: var(--dim); }
.more {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line);
  font-weight: 600; font-size: 15px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.card:hover .more { background: var(--text); color: var(--bg); }
.more b { display: inline-block; transition: transform 0.5s var(--ease); }
.card:hover .more b { transform: translateX(4px); }
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--dim);
}
.hero .tag { font-size: 14px; padding: 9px 18px; background: rgba(255, 255, 255, 0.04); }
.tag.live { color: #6ee7a0; border-color: rgba(110, 231, 160, 0.25); }
.tag.live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(110, 231, 160, 0); } }

/* feature tiles */
.tile { padding: 32px; }
.icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(var(--glow), 0.1); border: 1px solid rgba(var(--glow), 0.2); color: #ffb4bb;
  transition: transform 0.6s var(--ease);
}
.icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile:hover .icon { transform: translateY(-4px) rotate(-6deg) scale(1.08); }

/* plans */
.plan { padding: 40px; }
.plan .name { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.plan .big { font-size: clamp(48px, 6vw, 68px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-top: 6px; }
.plan .unit { color: var(--dim); margin-top: -4px; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.plan li { display: flex; gap: 12px; align-items: center; }
.plan li::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23f5f5f7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.plan.pro {
  --glow: 255, 92, 104;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(16, 14, 17, 0.94), rgba(10, 10, 12, 0.94)) padding-box,
    conic-gradient(from var(--angle), rgba(255, 255, 255, 0.08) 0 62%, rgba(255, 92, 104, 0.9) 78%, rgba(255, 200, 205, 0.9) 84%, rgba(255, 255, 255, 0.08) 96%) border-box;
  animation: spin 6s linear infinite;
}
.plan.pro li::before { background-color: rgba(255, 92, 104, 0.22); }
.plan.pro .name { color: #ffb4bb; }
@keyframes spin { to { --angle: 360deg; } }

/* safety note */
.note { max-width: 760px; margin: 0 auto; flex-direction: row; align-items: flex-start; gap: 20px; padding: 30px 34px; }
.note .icon { flex: none; --glow: 255, 196, 92; color: #ffd28a; }
.note p { color: var(--text); opacity: 0.85; }
.note strong { display: block; margin-bottom: 4px; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.pill {
  display: inline-block; position: relative; overflow: hidden;
  padding: 18px 34px; border-radius: 999px;
  font-weight: 600; font-size: 17px;
  background: var(--text); color: var(--bg);
  transition: box-shadow 0.5s var(--ease), opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease);
}
.pill span { display: inline-block; transition: transform 0.3s var(--ease); }
.pill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.9s var(--ease);
}
.pill:hover { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06), 0 24px 60px -16px rgba(255, 255, 255, 0.35); }
.pill:hover::after { transform: translateX(120%); }
.pill.ghost { background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid var(--line); }
.pill.ghost::after { display: none; }
.pill.ghost:hover { background: rgba(255, 255, 255, 0.1); box-shadow: none; }
.js .pill.rise.in.pulling { transition: box-shadow 0.5s var(--ease), transform 0.25s var(--ease); }

/* closing call to action */
.hello { text-align: center; padding: 2vh 24px 14vh; }
.hello h2 { font-size: clamp(44px, 7vw, 96px); letter-spacing: -0.05em; margin: 0 0 32px; line-height: 1; }
.hello .actions { --d: 150ms; }

/* support questions */
.faq { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 24px 12vh; display: grid; gap: 12px; }
.faq details {
  border-radius: 22px; border: 1px solid var(--line); background: var(--glass);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: background 0.4s, border-color 0.4s;
}
.faq details:hover, .faq details[open] { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 26px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 9v10M9 14h10' fill='none' stroke='%23f5f5f7' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat;
  transition: transform 0.5s var(--ease), background-color 0.4s;
}
.faq details[open] summary::after { transform: rotate(135deg); background-color: rgba(255, 92, 104, 0.25); }
.faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size 0.5s var(--ease), content-visibility 0.5s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq details p { margin: 0; padding: 0 26px 24px; color: var(--dim); max-width: 64ch; }

/* long-form text (privacy) */
.prose {
  width: min(820px, 100% - 48px); margin: 0 auto 12vh; padding: 48px clamp(26px, 5vw, 56px);
  border-radius: 32px; border: 1px solid var(--line); background: var(--glass);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.prose h2 { font-size: 22px; letter-spacing: -0.02em; margin: 36px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0; color: var(--dim); }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--text); }
.meta { color: var(--dim); font-size: 15px; margin: 18px 0 0; --d: 1000ms; }

.foot {
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 24px 44px;
  border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; text-align: center;
}

/* TradeWind pages use its gold */
.tradewind { --dot: 240, 190, 100; }
.tradewind .glow { background: radial-gradient(closest-side, rgba(222, 178, 92, 0.13), rgba(120, 170, 140, 0.05) 55%, transparent); }
.tradewind .tile { --glow: 222, 178, 92; }
.tradewind .icon { color: #f0cd8c; }
.tradewind .app-icon { box-shadow: 0 30px 90px -20px rgba(222, 178, 92, 0.5), 0 0 0 1px var(--line); }

/* infinity mark */
.mark { width: 30px; height: 15px; margin-right: 10px; overflow: visible; }
.mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark .base { stroke: rgba(255, 255, 255, 0.85); stroke-width: 7; }
.mark .run { stroke-width: 7; stroke-dasharray: 22 78; animation: run 3.2s linear infinite; }
@keyframes run { to { stroke-dashoffset: -100; } }

@media (max-width: 600px) {
  .card, .plan { padding: 30px; }
  .card.app { min-height: 0; }
  .card h2 { font-size: 32px; }
  .subnav .title span { display: none; }
  .subnav a { padding: 8px 12px; }
  .note { flex-direction: column; }
  .grid { gap: 14px; }
  .tile { padding: 22px; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 4px; align-items: start; }
  .tile .icon { grid-row: span 2; width: 48px; height: 48px; }
  .tile h3 { margin: 0; font-size: 19px; }
  .tile p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rise, .js .split .wi { opacity: 1; transform: none; filter: none; }
}