/* Feature pages (AI, sustainability reporting, automations, smart stickers, integrations).
   Group prefix: ft-. Builds on the component kit in styles.css.
   Restrained, editorial: hairline rules instead of boxes, no shadows, glows or motion. */

/* ---- Hero ---- */
.ft-hero .wrap{display:flex;flex-direction:column;gap:20px;}
.ft-hero .h1{max-width:20ch;}
.ft-hero .lead{color:rgba(255,255,255,.75);max-width:56ch;margin:0;}
.ft-hero .hero-media{margin-top:clamp(28px,4vw,48px);}
.ft-hero .hero-media img{width:100%;height:auto;}

/* ---- Copy column in splits ---- */
.ft-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.ft-copy .body{font-size:17px;color:var(--ink-muted);max-width:52ch;}
.ft-icon img{width:40px;height:40px;object-fit:contain;}
.ft-actions{display:flex;justify-content:center;margin-top:clamp(36px,4vw,56px);}

/* ---- Ruled items (replace boxed cards) ---- */
.ft-item{border-top:1px solid var(--ink-primary);padding-top:20px;display:flex;flex-direction:column;gap:10px;}
.band-dark .ft-item{border-top-color:rgba(255,255,255,.4);}
.ft-item .body{font-size:17px;line-height:1.6;color:var(--ink-muted);}
.ft-item .body strong{display:block;font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.3;color:var(--ink-primary);margin-bottom:6px;}
.ft-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(32px,5vw,64px);}
.ft-list{display:flex;flex-direction:column;gap:32px;}

/* ---- Automations: category title left, items right ---- */
.ft-cat{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;}
.ft-cat-head{position:sticky;top:110px;border-top:1px solid var(--ink-primary);padding-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.ft-cat-head .h2{margin:0;}
.ft-cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(28px,4vw,48px);}
.ft-auto{border-top-color:var(--surface-border);}
.ft-auto .h3{font-size:20px;line-height:1.3;color:var(--ink-primary);}
.ft-auto .body{font-size:15.5px;color:var(--ink-muted);}

/* ---- Round product photos (smart stickers) ---- */
.ft-photo{display:flex;align-items:center;justify-content:center;}
.ft-photo.media-frame{padding:clamp(28px,5vw,64px);}
.ft-photo.media-frame img{width:100%;max-width:380px;height:auto;border-radius:50%;}
.ft-photo.ft-sticker.media-frame img{max-width:260px;border-radius:0;}
.ft-note{border-top:1px solid var(--surface-border);padding-top:16px;width:100%;}
.ft-note .body{font-size:15.5px;font-style:italic;color:var(--ink-muted);margin:0;}

/* ---- FAQ ---- */
.ft-faq .section-head{margin-bottom:clamp(24px,3vw,40px);}
.ft-faq details.faq:first-of-type{border-top:1px solid var(--border-soft);}

/* ---- Integrations directory (cards stay: each is a distinct item) ---- */
.ft-int .int-filters{margin-bottom:clamp(32px,4vw,48px);gap:8px;}
.ft-int .int-filter{border-radius:var(--radius-sm);}
.ft-int .int-filter:hover{border-color:var(--ink-primary);}
.ft-int .int-filter.is-active,.ft-int .int-filter.is-active:hover{background:var(--ink-primary);border-color:var(--ink-primary);color:#fff;}
.ft-int .int-grid{gap:20px;}
.ft-int .int-card{padding:24px;gap:14px;box-shadow:none;transition:none;}
.ft-int .int-logo{width:100%;height:64px;justify-content:flex-start;border-bottom:1px solid var(--border-soft);padding-bottom:16px;box-sizing:content-box;}
.ft-int .int-logo img{max-height:40px;max-width:150px;}
.ft-int .int-card .h3{font-size:20px;}
.ft-int .int-card .body{font-size:15px;color:var(--ink-muted);flex:1;}
.ft-int .int-tag{border-radius:var(--radius-sm);}
.ft-int .int-more{text-decoration:underline;text-underline-offset:3px;color:var(--ink-primary);font-weight:500;}
.ft-int .int-more:hover{color:var(--brand-orange);}
.ft-int .int-list{color:var(--ink-muted);}

/* ---- Customer quote (uses kit .quote-card hairline) ---- */
.ft-quote{gap:18px;}
.ft-quote .ft-quote-logo{width:auto;height:36px;align-self:flex-start;}
.ft-quote .ft-quote-about{font-size:14px;color:var(--ink-muted);}
.ft-quote .quote{font-size:clamp(19px,2vw,24px);}
.ft-quote .ft-quote-name{font-size:15px;}

@media (max-width:960px){
  .ft-cat{grid-template-columns:1fr;gap:32px;}
  .ft-cat-head{position:static;}
}
@media (max-width:700px){
  .ft-cols,.ft-cat-grid{grid-template-columns:1fr;}
  .ft-cat-grid{gap:28px;}
  .ft-int .int-filters{justify-content:flex-start;}
}