@charset "UTF-8";
/* Feature pages: one template, after heyjules.app's use-case pages. Every page has the same sections in the same order:
   hero → chips → three panels → questions → the rest of Tailorstack → sign-up. Only the words, the tint and the screens change. */

/* Hero: centred, then the product rising out of a cloth band in the page's tint */
.f-hero { padding-top: 88px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.label { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font: var(--type-label); letter-spacing: .12em; text-transform: uppercase; color: var(--tone); }
.label img { height: 32px; width: auto; filter: drop-shadow(0 3px 5px rgba(4,6,51,.18)); transform: rotate(-5deg); }
.f-hero .h1 { max-width: 920px; }
.f-hero .lede { margin: 20px auto 32px; font: var(--type-lede); max-width: 620px; color: var(--tone); }
.f-hero .email-cta { width: 100%; }
.band { position: relative; width: 100%; margin-top: 64px; padding: 64px 64px 0; height: 640px; }
.band .win { margin: 0 auto; max-width: 1040px; }

/* Windows: always the full app window, true to Figma at 1440 × 900, with the same frame and shadow everywhere */
.win { position: relative; border-radius: var(--r-3) var(--r-3) 0 0; box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -36px rgba(4,6,51,.4); background: #fff; }

/* Chips: the jobs this feature covers, as W icons on coloured discs drifting by on an endless loop (FEAT.icons).
   Icons stay at 48px, twice their 24px grid, and discs are sized so the icon sits on whole pixels inside them. */
.chips-sec { text-align: center; }
body.fpage { overflow-x: clip; }
.chips-bleed { position: relative; margin: 8px calc(50% - 50vw) -32px; padding: 32px 0; overflow: hidden; }   /* the padding gives the blur room to spread above and below the discs */
.chips { display: flex; width: max-content; animation: chips-loop var(--loop, 60s) linear infinite; }
.chips i { flex: none; display: grid; place-items: center; width: 96px; height: 96px; margin-right: 32px; border-radius: 50%; }   /* margins, not gap, so half the row is exactly one lap */
@media (min-width: 1440px) { .chips i { margin-right: 40px; } }   /* wider screens, more air; whole pixels so a paused row stays sharp */
@media (min-width: 1800px) { .chips i { margin-right: 48px; } }
.chips .bi { display: block; }
.chips-bleed:hover .chips { animation-play-state: paused; }
@keyframes chips-loop { to { transform: translateX(-50%); } }
@media (max-width: 860px) { .chips i { width: 80px; height: 80px; margin-right: 24px; } }
@media (prefers-reduced-motion: reduce) { .chips { animation: none; } }

/* The row's ends: a progressive blur, stronger toward the screen edge, instead of a fade. Six stacked layers over the moving row,
   each blur twice the last and each strongest over its own band. The markup is EDGE in tools/build-features.py: six <i>s a side.
   Keep masks off the row: one weakens the blur. */
.edge { position: absolute; top: 0; bottom: 0; width: clamp(64px, 12vw, 200px); pointer-events: none; }
.edge.l { left: 0; --dir: to left; }
.edge.r { right: 0; --dir: to right; }
.edge i { position: absolute; inset: 0; }
.edge i:nth-child(1) { -webkit-backdrop-filter: blur(0.5px); backdrop-filter: blur(0.5px); -webkit-mask-image: linear-gradient(var(--dir), transparent 0%, #000 14.3%, #000 28.6%, transparent 42.9%); mask-image: linear-gradient(var(--dir), transparent 0%, #000 14.3%, #000 28.6%, transparent 42.9%); }
.edge i:nth-child(2) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(var(--dir), transparent 14.3%, #000 28.6%, #000 42.9%, transparent 57.1%); mask-image: linear-gradient(var(--dir), transparent 14.3%, #000 28.6%, #000 42.9%, transparent 57.1%); }
.edge i:nth-child(3) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(var(--dir), transparent 28.6%, #000 42.9%, #000 57.1%, transparent 71.4%); mask-image: linear-gradient(var(--dir), transparent 28.6%, #000 42.9%, #000 57.1%, transparent 71.4%); }
.edge i:nth-child(4) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(var(--dir), transparent 42.9%, #000 57.1%, #000 71.4%, transparent 85.7%); mask-image: linear-gradient(var(--dir), transparent 42.9%, #000 57.1%, #000 71.4%, transparent 85.7%); }
.edge i:nth-child(5) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(var(--dir), transparent 57.1%, #000 71.4%, #000 85.7%, transparent 100%); mask-image: linear-gradient(var(--dir), transparent 57.1%, #000 71.4%, #000 85.7%, transparent 100%); }
.edge i:nth-child(6) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(var(--dir), transparent 71.4%, #000 85.7%); mask-image: linear-gradient(var(--dir), transparent 71.4%, #000 85.7%); }
/* Without backdrop blur, the ends fade instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .edge { display: none; }
  .chips-bleed { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
}

/* Panels: three per page, built the same way every time */
.panels { display: flex; flex-direction: column; gap: 72px; }   /* each panel its own beat, with room to breathe between them */
.panel { padding: 56px 56px 0; height: 720px; display: flex; flex-direction: column; }
.panel > .ph { margin-bottom: 40px; }   /* the panel's own heading; in-app placeholders are .ph too */
.panel > .ph .tone { display: block; }   /* the two halves of the heading on two lines, as in Figma */
.panel .win { flex: none; }
.panel .stage { position: relative; display: flex; gap: 40px; align-items: flex-start; }
.panel .stage .win { flex: 1; min-width: 0; }
.panel .phone-on { flex: none; width: 250px; filter: drop-shadow(0 24px 28px rgba(4,6,51,.22)); }
.panel .phones-only { justify-content: center; gap: 48px; }
/* A phone on top of the window (Figma 335:9723): at its top right, a fifth of its width, rising above it beside the heading.
   Margins in % are of the stage's width, so it keeps its place at any size. */
.panel .phone-on.over { position: absolute; top: 0; right: -.5%; z-index: 1; width: 20.3%; margin-top: -9.7%; }
@media (max-width: 860px) {
  .band { padding: 20px 16px 0; height: auto; margin-top: 40px; }
  .panels { gap: 40px; }
  .panel { padding: 28px 16px 0; height: auto; }
  .panel > .ph { margin-bottom: 24px; }
  .win { border-radius: var(--r-2) var(--r-2) 0 0; }
  .panel .stage { flex-direction: column; align-items: center; gap: 20px; }
  .panel .stage .win { width: 100%; }
  .panel .stage .win.desk-only { display: none; }   /* on phones some panels show only their phone */
  .panel .phone-on.over { position: static; width: 64%; margin: 0 0 28px; }   /* the whole phone, inside the card */
  .panel .phone-on { width: 64%; }
  .panel .phones-only { flex-direction: row; gap: 12px; padding-bottom: 28px; }
  .panel .phones-only .phone-on { width: 48%; }
}

/* Questions */
.faq-sec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 48px; }
@media (max-width: 860px) { .faq-sec { grid-template-columns: 1fr; } }
.faq-sec .list { border-top: 1px solid var(--ink); }

/* The rest of Tailorstack */
.more-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.more-card { display: flex; align-items: center; gap: 16px; padding: 16px 24px; text-decoration: none; color: inherit; background: rgba(255,255,255,.5); }
.more-card img { width: 56px; height: 44px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 5px rgba(4,6,51,.16)); transform: rotate(-4deg); }
/* Every card the same: the cutout in one slot, the title with one line under it, and the arrow, all on one centre line.
   Hover only moves the arrow. */
.more-card div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.more-card b, .more-card span.s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* never a second line; the lines are written to fit */
.more-card b { font: var(--type-h4); letter-spacing: -.01em; }
.more-card span.s { font: var(--type-small); color: var(--tone); }
.more-card .go { flex: none; color: var(--tone); transition: transform var(--dur) var(--ease); }
.more-card:hover .go { transform: translateX(3px); }
@media (max-width: 1020px) { .more-grid { grid-template-columns: 1fr; } }   /* below this, three across leaves no room for one line */
@media (max-width: 360px) { .more-card img { display: none; } }   /* the smallest phones give the cutout's room to the line */

.closing { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.closing .email-cta { width: 100%; }