/* The repeating product-section template (eyebrow → h2 → sub → button → visual band →
   three auto-rotating feature tabs → quote), plus the manifesto. */

/* ── Manifesto: reveal-on-scroll paragraph with inline product icons ── */
.manifesto .rail { padding: 160px 16px 128px; }
.manifesto-copy {
  position: relative; isolation: isolate; max-width: 530px; margin: 0 auto; background: #fff;
  -webkit-mask-image: linear-gradient(#000 calc(var(--progress, 1) * 100%), #0003 calc(var(--progress, 1) * 100% + 75%));
  mask-image: linear-gradient(#000 calc(var(--progress, 1) * 100%), #0003 calc(var(--progress, 1) * 100% + 75%));
  transform: translateY(calc(var(--progress, 1) * -75px));
}
.manifesto-copy p { font-size: 30px; line-height: 1.375; color: var(--n-800); }
.manifesto-copy p + p { margin-top: 32px; }
.manifesto-copy p:last-child { color: var(--n-500); }
.inline-ico { display: inline-flex; vertical-align: -2px; width: 18px; height: 18px; margin: 0 2px; border-radius: 5px; align-items: center; justify-content: center; }
.inline-ico svg { width: 11px; height: 11px; }
.float-card {
  position: absolute; width: 170px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--n-200);
  box-shadow: 0 4px 12px -4px rgb(0 0 0 / .1); font-size: 11px; line-height: 14px; animation: bob 6s ease-in-out infinite;
}
.float-card header { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; }
.float-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 8px 0 0; }
.float-card dt { color: var(--n-500); } .float-card dd { margin: 0; font-weight: 600; font-size: 13px; }
.float-ico { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--n-200); box-shadow: 0 2px 6px rgb(0 0 0 / .06); color: var(--n-600); animation: bob 7s ease-in-out infinite; }
.float-ico svg { width: 16px; height: 16px; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(var(--r, 0deg)); } }

/* ── Product section header ── */
.product .rail { padding: 80px 0 40px; }
.section-head { padding: 0 48px; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--n-600); }
.section-head .h2 { margin-top: 12px; max-width: 512px; }
.section-head .sub { margin-top: 12px; max-width: 576px; }
.section-head .btn { margin-top: 32px; }

.band { margin-top: 80px; border-block: 1px solid var(--grid-border); background: var(--n-50); }
.visual { position: relative; height: 440px; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* ── Feature tabs: the active one gets the product colour and a progress rail ── */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; max-width: 800px; margin: 0 auto; padding: 32px 0; }
.feat { position: relative; display: flex; flex-direction: column; padding: 0 8px 0 24px; text-align: left; font-size: 14px; line-height: 20px; color: var(--n-900); transition: opacity .5s; }
.feat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--n-200); }
.feat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.feat[aria-selected="true"]::after { animation: feat-progress var(--feat-ms, 6000ms) linear forwards; }
.feats.paused .feat[aria-selected="true"]::after { animation: none; transform: scaleY(1); }
.feat svg { width: 16px; height: 16px; color: var(--n-900); }
.feat .t { margin-top: 8px; font-weight: 500; }
.feat .d { margin-top: 14px; color: var(--n-500); }
.feat .more { margin-top: 14px; display: inline-flex; align-items: center; gap: 2px; font-weight: 500; color: var(--accent); }
.feat .more svg { width: 14px; height: 14px; color: currentColor; transition: transform .15s; }
.feat .more:hover svg { transform: translateX(2px); }
.feat[aria-selected="false"] { opacity: .5; cursor: pointer; }
.feat[aria-selected="false"] .t { color: var(--n-500); }
.feat[aria-selected="false"] .more { color: var(--n-500); pointer-events: none; }
.feat[aria-selected="false"]:hover { opacity: .7; }
/* A soft ring in the section's colour, not the site-wide black box, when a tab has keyboard focus. */
.feat:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 8px; border-radius: 12px; }
@keyframes feat-progress { to { transform: scaleY(1); } }
.accent-publish { --accent: var(--publish); }
.accent-analytics { --accent: var(--analytics); }
.accent-crosspost { --accent: var(--crosspost); }
.accent-api { --accent: var(--n-900); }

/* A feature's visual swaps with a soft fade. */
.view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .4s, transform .4s var(--ease-out); }
.view[hidden] { display: flex; opacity: 0; transform: translateY(8px); pointer-events: none; }

/* ── Quote block with the dotted backdrop ── */
.quote { margin: 0; position: relative; isolation: isolate; display: flex; gap: 48px; align-items: flex-start; justify-content: space-between; padding: 56px 48px; border-top: 1px solid var(--grid-border); }
.quote blockquote { margin: 0; max-width: 742px; font-size: 24px; line-height: 32px; text-wrap: pretty;
  background: linear-gradient(rgb(0 0 0 / .6), #000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote figcaption { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.quote .who { margin-top: 16px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--n-600); }
.quote .role { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--n-500); }
.quote .mark { display: flex; align-items: center; gap: 8px; font: 700 18px/1 var(--font-display); letter-spacing: -.04em; }
.quote .seal { margin-top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--n-900); color: #fff; }
.quote .seal svg { width: 14px; height: 14px; }

/* ── Integrations-style floating tiles ── */
.connect { display: grid; grid-template-columns: 384px 1fr; min-height: 440px; }
.connect-copy { padding: 96px 0 96px 48px; }
.connect-copy .sub { margin-top: 12px; max-width: 384px; }
.connect-copy .btn { margin-top: 32px; }
.tiles { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%); mask-image: linear-gradient(90deg, transparent, #000 20%); }
.tiles .grid-bg { opacity: .7; }
.tile {
  position: absolute; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 8px;
  background: linear-gradient(var(--n-100), #fff); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.tile:hover { z-index: 1; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); }
.tile .mark { width: 28px; height: 28px; }

@media (max-width: 767px) {
  .manifesto .rail { padding: 96px 16px; }
  .manifesto-copy p { font-size: 22px; }
  .float-card, .float-ico { display: none; }
  .product .rail { padding-top: 48px; }
  .section-head { padding: 0 20px; }
  .band { margin-top: 40px; }
  .visual { height: 360px; }
  .feats { grid-template-columns: 1fr; padding: 32px 20px; }
  .quote { flex-direction: column; gap: 24px; padding: 40px 20px; }
  .quote blockquote { font-size: 18px; line-height: 28px; }
  .quote figcaption { align-items: flex-start; text-align: left; }
  .connect { grid-template-columns: 1fr; }
  .connect-copy { padding: 48px 20px 0; }
  .tiles { height: 300px; }
}