/* features section: owned by its partial templates/marketing/_features.html.
   Light canvas, white reading cards, two dark app-style cards. Mocks follow the
   native app's components; cards are size containers so each mock adapts to the
   width it is given rather than the viewport. */

.ft-section {
  --ft-spotted:#e8b44c; --ft-flown:#d32f2f; --ft-livery:#1976d2; --ft-military:#43a047; --ft-heavy:#ab47bc; --ft-wide:#fb8c00; --ft-new:#409faa;
  --ft-fill:#e8eceb; --ft-ring:0 8px 24px rgba(17,47,55,.16);
  background:var(--marketing-paper); color:var(--marketing-ink);
}
.ft-inner { padding-block:112px; }
.ft-symbols { position:absolute; width:0; height:0; overflow:hidden; }
.ft-icon { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ft-section svg use { pointer-events:none; }

/* Intro */
.ft-intro { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px 64px; align-items:end; margin-bottom:80px; }
.ft-intro h2 { margin:0; font:700 clamp(44px,5.4vw,80px)/1 var(--display-font); letter-spacing:-.055em; text-wrap:balance; }
.ft-intro h2 em { display:block; font-style:normal; color:var(--field-teal-deep); }
.ft-lede { margin:0; max-width:520px; color:var(--marketing-muted); font-size:18px; line-height:1.65; }

/* Groups */
.ft-group + .ft-group { margin-top:72px; }
.ft-group-label { display:flex; align-items:center; gap:14px; margin-bottom:24px; padding-top:24px; border-top:1px solid var(--marketing-line); }
.ft-group-label p { margin:0; color:var(--marketing-muted); font-size:17px; line-height:1.5; }
.ft-group-label strong { color:var(--marketing-ink); font:700 20px/1.3 var(--display-font); letter-spacing:-.02em; margin-right:4px; }

/* Grid: one column by default; the grid is itself a size container, so the
   layout follows the width the section actually has. */
.ft-group { container:ft-grid / inline-size; }
.ft-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
/* Wide: an alternating 7/5 bento. */
@container ft-grid (min-width:1100px) {
  .ft-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .ft-grid>.ft-card { grid-column:span 7; }
  .ft-grid>.ft-history, .ft-grid>.ft-flown, .ft-grid>.ft-leaders, .ft-grid>.ft-both { grid-column:span 5; }
}
/* Tablet and small laptop: full-width cards; narrower mocks sit beside their copy. */
@container ft-grid (min-width:860px) and (max-width:1099.98px) {
  .ft-grid>.ft-history, .ft-grid>.ft-flown, .ft-grid>.ft-leaders, .ft-grid>.ft-both { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start; column-gap:40px; }
  .ft-grid>.ft-card>.ft-mock { margin-top:0; }
}

/* The aircraft: four features stacked as full-width rows, each its own small section.
   From 860px the copy and its mockup sit side by side, alternating sides; below that
   they stack. The media column is its own size container, so the mockups lay
   themselves out for the column they actually get. */
.ft-grid.ft-grid-stack { grid-template-columns:minmax(0,1fr); gap:32px; }
.ft-grid.ft-grid-stack>.ft-card { grid-column:1 / -1; }
.ft-row-media { container-type:inline-size; min-width:0; margin-top:auto; }
.ft-row-media>* { margin-top:0; }
@container ft-grid (min-width:860px) {
  .ft-grid.ft-grid-stack>.ft-card { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; column-gap:56px; padding:48px; }
  .ft-grid.ft-grid-stack>.ft-card:nth-child(even) { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .ft-grid.ft-grid-stack>.ft-card:nth-child(even)>.ft-copy { order:2; }
  .ft-grid.ft-grid-stack>.ft-card>.ft-row-media { margin-top:0; }
  .ft-grid-stack .ft-copy { max-width:460px; }
  .ft-grid-stack .ft-copy h3 { font-size:clamp(30px,3vw,42px); line-height:1.08; }
  .ft-grid-stack .ft-copy p:not(.ft-tag) { font-size:17px; }
}
@container ft-grid (min-width:1100px) {
  .ft-grid.ft-grid-stack>.ft-card { padding:56px 64px; column-gap:72px; }
}

/* Cards */
.ft-card { container-type:inline-size; position:relative; display:flex; flex-direction:column; gap:28px; min-width:0; padding:32px; border:1px solid var(--marketing-line); border-radius:24px; background:#fff; }
.ft-card>.ft-mock, .ft-card>.ft-livery-stage, .ft-card>.ft-value-body, .ft-card>.ft-legend-body { margin-top:auto; }
.ft-copy { max-width:520px; }
.ft-tag { display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; color:var(--field-teal-deep); font-size:14px; font-weight:700; }
.ft-tag .icon-binoculars { width:18px; height:18px; }
.ft-copy h3 { margin:0 0 12px; font:700 clamp(24px,2.3vw,31px)/1.14 var(--display-font); letter-spacing:-.035em; text-wrap:balance; }
.ft-copy p:not(.ft-tag) { margin:0; color:var(--marketing-muted); font-size:16px; line-height:1.65; }
.ft-copy strong { color:var(--marketing-ink); }
.ft-card-tint { background:var(--field-teal-tint); border-color:#cde3e3; }
.ft-card-dark, .ft-card-brand { color:#edeff0; }
.ft-card-dark { background:var(--app-charcoal); border-color:#31383b; }
.ft-card-brand { background:var(--field-dark); border-color:#1a3d46; }
.ft-card-dark .ft-tag, .ft-card-brand .ft-tag { color:var(--field-teal-light); }
.ft-card-dark .ft-copy p:not(.ft-tag) { color:#b7bec0; }
.ft-card-brand .ft-copy p:not(.ft-tag) { color:#a6bfbe; }
.ft-card-dark .ft-copy strong, .ft-card-brand .ft-copy strong { color:#fff; }
.ft-card-dark :focus-visible, .ft-card-brand :focus-visible { outline-color:var(--field-teal-light); }

/* Shared bits */
.ft-avatar { display:inline-grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:var(--field-teal-deep); color:#fff; font:700 14px/1 var(--display-font); }
.ft-avatar-you { background:var(--field-teal-deep); }
.ft-avatar-maya { background:#a6d7d6; color:var(--field-dark); }
.ft-avatar-leo { background:#64838a; }
.ft-avatar-theo { background:#1a3d46; }
.ft-avatar-priya { background:#e6f3f3; color:var(--field-teal-deep); box-shadow:inset 0 0 0 1px #a6d7d6; }
.ft-avatar-sam, .ft-avatar-kai { background:#52676d; }
.ft-avatar-jonah, .ft-avatar-nora, .ft-avatar-ivy { background:#cfe5e5; color:var(--field-dark); }
.ft-avatar-ana { background:#2f5a63; }
.ft-dot { display:inline-block; width:12px; height:12px; flex:none; border-radius:50%; background:var(--ft-new); box-shadow:0 0 0 2px #fff; }
.ft-dot-live { background:var(--ft-new); }
.ft-dot-spotted { background:var(--ft-spotted); }
.ft-dot-flown { background:var(--ft-flown); }
.ft-dot-livery { background:var(--ft-livery); }
.ft-dot-military { background:var(--ft-military); }
.ft-dot-heavy { background:var(--ft-heavy); }
.ft-dot-wide { background:var(--ft-wide); }
.ft-pro { display:inline-flex; align-items:center; min-height:22px; padding:0 9px; border-radius:999px; background:var(--field-teal-deep); color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; vertical-align:2px; }
.ft-map-art { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Map markers: the supplied top-down artwork with a 2px outline in the meaning's color. */
.ft-marker { --ft-c:var(--ft-new); display:block; height:auto; filter:drop-shadow(1.5px 0 0 var(--ft-c)) drop-shadow(-1.5px 0 0 var(--ft-c)) drop-shadow(0 1.5px 0 var(--ft-c)) drop-shadow(0 -1.5px 0 var(--ft-c)) drop-shadow(0 6px 8px rgba(17,47,55,.22)); }
.ft-marker-spotted { --ft-c:var(--ft-spotted); }
.ft-marker-flown { --ft-c:var(--ft-flown); }
.ft-marker-livery { --ft-c:var(--ft-livery); }
.ft-marker-heavy { --ft-c:var(--ft-heavy); }
.ft-marker-label { position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:8px; min-height:32px; margin:0; padding:4px 12px 4px 10px; border-radius:999px; background:rgba(17,47,55,.86); color:#fff; font-size:13px; font-weight:700; }
.ft-marker-label .ft-dot { box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.ft-marker-label .ft-pro { min-height:20px; padding:0 7px; }
.ft-marker-label-light { background:#fff; color:var(--marketing-ink); box-shadow:0 2px 8px rgba(17,47,55,.14); }

/* 1 · Special livery */
.ft-livery-stage { display:grid; gap:16px; }
.ft-livery-map { position:relative; margin:0; min-height:200px; overflow:hidden; border-radius:20px; border:1px solid #1f4a54; }
.ft-livery-map .ft-marker { position:absolute; left:50%; top:46%; width:150px; transform:translate(-50%,-50%) rotate(-38deg); }
.ft-livery-card .flight-card { max-width:420px; margin-inline:auto; }
.ft-livery-bonus { position:absolute; left:12px; top:12px; box-shadow:0 0 0 1px rgba(166,215,214,.25); }
/* Narrow: the map is taller and the marker smaller and centered, so the bonus chip
   (top) and outline label (bottom) sit clear of the aircraft. */
@container (max-width:599.98px) {
  .ft-livery-map { min-height:252px; }
  .ft-livery-map .ft-marker { top:50%; width:116px; }
}
@container (min-width:600px) {
  .ft-livery-stage { grid-template-columns:minmax(0,1fr) minmax(0,330px); align-items:stretch; }
  .ft-livery-map { min-height:0; }
  .ft-livery-card .flight-card { max-width:none; }
}

/* 2 · Spotting history */
.ft-history-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ft-history-badges .flight-badge { font-size:13px; padding:7px 12px; }
.ft-history-badges .flight-badge svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ft-badge-friends { background:var(--field-teal-deep); color:#fff; }
.ft-ah { padding:14px; border-radius:20px; background:var(--marketing-paper); border:1px solid var(--marketing-line); }
.ft-ah-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ft-ah-kicker { margin:0 0 2px; color:var(--marketing-muted); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ft-ah-title { margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; }
.ft-ah-reg { flex:none; white-space:nowrap; padding:6px 10px; border-radius:10px; background:var(--ft-fill); color:var(--marketing-ink); font-size:14px; font-weight:800; letter-spacing:.02em; }
.ft-seg { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; padding:4px; border-radius:14px; background:var(--ft-fill); }
.ft-seg-option { min-height:44px; padding:6px 8px; border:0; border-radius:11px; background:transparent; color:var(--marketing-muted); font-size:14px; font-weight:700; line-height:1.2; }
.ft-seg-option[aria-pressed="true"] { background:#fff; color:var(--field-teal-deep); box-shadow:0 1px 3px rgba(17,47,55,.12); }
.ft-seg-option:hover:not([aria-pressed="true"]) { color:var(--marketing-ink); }
.ft-ah-list { display:grid; align-content:start; gap:6px; margin:12px 0 0; padding:0; list-style:none; }
/* Sample-control stacks: every option shares one grid cell and only the active one
   is visible, so switching never changes the card's height at any width. */
.ft-stack { display:grid; }
.ft-stack>* { grid-area:1 / 1; min-width:0; }
.ft-stack>[data-ft-off] { visibility:hidden; }
.ft-ah-stack { margin-top:12px; }
.ft-ah-stack>.ft-ah-list { margin:0; }
.ft-ah-note { margin:10px 2px 0; color:var(--marketing-muted); font-size:13px; line-height:1.4; }
.ft-ah-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:52px; padding:8px 10px; border-radius:12px; background:#fff; }
.ft-ah-current { background:#e6f3f3; box-shadow:inset 0 0 0 1px #c3e0e0; }
.ft-ah-who { display:grid; min-width:0; }
.ft-ah-name { font-size:15px; font-weight:700; }
.ft-ah-flight { color:var(--marketing-muted); font-size:13px; font-weight:500; }
.ft-ah-current .ft-ah-flight { color:var(--field-teal-deep); font-weight:600; }
.ft-ah-kind { padding:3px 9px; border-radius:999px; background:#f7e3b9; color:var(--field-dark); font-size:12px; font-weight:700; }
.ft-ah-date { color:var(--marketing-muted); font-size:13px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
@container (max-width:420px) {
  .ft-ah-row { grid-template-columns:32px minmax(0,1fr) auto; grid-template-areas:"av who kind" "av date kind"; row-gap:0; }
  .ft-ah-row>.ft-avatar { grid-area:av; }
  .ft-ah-who { grid-area:who; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px; }
  .ft-ah-kind { grid-area:kind; }
  .ft-ah-date { grid-area:date; font-size:12px; }
}

/* 3 · Flying history */
.ft-flown-map { position:relative; height:190px; overflow:hidden; border-radius:20px; border:1px solid var(--marketing-line); }
.ft-flown-map .ft-marker { position:absolute; left:58%; top:44%; width:136px; transform:translate(-50%,-50%) rotate(62deg); }
.ft-flown-map .ft-marker-label { top:12px; bottom:auto; }
.ft-flown-ticket { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:4px 14px; margin:-44px 14px 0; padding:16px; border-radius:18px; background:#fff; border:1px solid var(--marketing-line); box-shadow:var(--ft-ring); }
.ft-flown-ticket img { width:40px; height:40px; border-radius:10px; object-fit:contain; }
.ft-flown-route { margin:0; font:700 22px/1.15 var(--display-font); letter-spacing:-.03em; }
.ft-flown-route span[aria-hidden] { color:var(--marketing-muted); font-size:.85em; }
.ft-flown-meta { margin:2px 0 0; color:var(--marketing-muted); font-size:13px; line-height:1.4; }
.ft-flown-ticket .flight-badge { grid-column:1 / -1; justify-self:start; margin-top:10px; font-size:13px; padding:7px 12px; }
.ft-badge-flown { background:var(--ft-flown); color:#fff; }
.ft-badge-flown svg { width:15px; height:15px; fill:currentColor; stroke:none; }

/* 4 · Map legend */
.ft-legend-body { display:grid; gap:20px; }
.ft-legend-map { position:relative; min-height:250px; overflow:hidden; border-radius:20px; border:1px solid #cde3e3; background:#e3ebe2; }
.ft-pin { position:absolute; display:grid; justify-items:center; gap:2px; transform:translate(-50%,-50%); }
.ft-pin .ft-marker { width:var(--ft-size,72px); transform:rotate(var(--ft-r,0deg)); }
.ft-pin-label { padding:3px 9px; border-radius:999px; background:#fff; color:var(--marketing-ink); font-size:12px; font-weight:700; white-space:nowrap; box-shadow:0 1px 4px rgba(17,47,55,.16); }
.ft-pin-spotted { left:20%; top:30%; --ft-r:-28deg; }
.ft-pin-flown { left:52%; top:22%; --ft-r:58deg; --ft-size:64px; }
.ft-pin-livery { left:44%; top:68%; --ft-r:-118deg; --ft-size:66px; }
.ft-pin-new { left:84%; top:30%; --ft-r:150deg; --ft-size:66px; }
.ft-pin-heavy { left:79%; top:72%; --ft-r:20deg; --ft-size:84px; }
.ft-legend-keys { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; align-content:start; }
.ft-legend-all { grid-column:1 / -1; }
.ft-legend-title { margin:0 0 10px; color:var(--marketing-muted); font-size:14px; font-weight:700; }
.ft-keys { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.ft-keys li { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; }
@container (min-width:600px) {
  .ft-legend-body { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:stretch; }
  .ft-legend-keys { grid-template-columns:1fr; align-content:center; gap:24px; }
}
@container (max-width:380px) {
  .ft-pin .ft-marker { width:calc(var(--ft-size,72px) * .8); }
  .ft-pin-label { font-size:12px; padding:2px 7px; }
  .ft-pin-new { left:80%; }
  .ft-pin-spotted { left:22%; }
}

/* 5 · Spot Value */
.ft-value-body { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:stretch; }
.ft-celebrate, .ft-factors { min-width:0; }
.ft-celebrate { display:flex; flex-direction:column; min-height:320px; padding:18px; border-radius:24px; background:var(--app-charcoal); color:#edeff0; }
.ft-spotted { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-height:56px; margin:0; padding:10px 16px; border-radius:16px; background:var(--field-gold); color:var(--field-dark); font-size:20px; font-weight:800; }
.ft-spotted .ft-icon { width:24px; height:24px; stroke-width:3; }
.ft-spotted-points { margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ft-rewards { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.ft-reward { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 12px 4px 10px; border-radius:999px; background:var(--field-teal-deep); color:#fff; font-size:13px; font-weight:700; }
.ft-reward .ft-icon { width:15px; height:15px; }
.ft-reward-milestone { background:var(--field-gold); color:var(--field-dark); }
.ft-reward-milestone .ft-icon { fill:currentColor; stroke:none; }
.ft-celebrate-actions { display:grid; grid-template-columns:1.3fr 1fr; gap:8px; margin-top:auto; padding-top:24px; }
.ft-celebrate-actions span { display:grid; place-items:center; min-height:48px; border-radius:14px; background:var(--field-teal-deep); color:#fff; font-size:16px; font-weight:700; }
.ft-celebrate-actions span+span { background:var(--app-control); color:var(--field-teal-light); }
.ft-factors-title { margin:0 0 10px; font-size:15px; font-weight:800; }
.ft-factors ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.ft-factors li { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:14px; background:var(--marketing-paper); }
.ft-factors li>span:nth-child(2) { display:grid; gap:1px; min-width:0; }
.ft-factors strong { font-size:15px; }
.ft-factors li>span:nth-child(2)>span { color:var(--marketing-muted); font-size:14px; line-height:1.45; }
.ft-factor-icon { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; }
.ft-factor-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ft-up { background:var(--field-teal-tint); color:var(--field-teal-deep); box-shadow:inset 0 0 0 1px #c3e0e0; }
.ft-down { background:var(--ft-fill); color:var(--marketing-muted); }
.ft-rules { margin:12px 0 0; color:var(--marketing-muted); font-size:13px; line-height:1.5; }
@container (max-width:330px) {
  .ft-celebrate { padding:14px; }
  .ft-spotted { font-size:18px; padding-inline:12px; }
}
@container (min-width:620px) {
  .ft-value-body { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
}

/* 6 · Leaders */
.ft-chips { display:flex; gap:8px; margin-bottom:10px; }
.ft-chip { flex:1 1 auto; min-width:0; min-height:44px; padding:0 14px; border:0; white-space:nowrap; border-radius:999px; background:var(--app-control); color:#edeff0; font-size:14px; font-weight:700; }
.ft-chip[aria-pressed="true"] { background:#edeff0; color:var(--app-charcoal); }
.ft-chip:hover:not([aria-pressed="true"]) { background:#3b4245; }
.ft-seg-dark { background:var(--app-control); }
.ft-seg-dark .ft-seg-option { color:#b7bec0; }
.ft-seg-dark .ft-seg-option[aria-pressed="true"] { background:#45494b; color:var(--field-teal-light); box-shadow:none; }
.ft-seg-dark .ft-seg-option:hover:not([aria-pressed="true"]) { color:#fff; }
.ft-lb-stack { margin-top:12px; }
.ft-lb-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.ft-lb-row { display:grid; grid-template-columns:28px 36px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:58px; padding:8px 14px 8px 12px; border-radius:16px; background:var(--app-raised); }
.ft-lb-row .ft-avatar { width:36px; height:36px; }
.ft-lb-me { background:rgba(64,159,170,.16); box-shadow:inset 0 0 0 1.5px rgba(64,159,170,.55); }
.ft-lb-rank { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#b7bec0; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
.ft-medal { color:var(--field-dark); }
.ft-medal-1 { background:var(--field-gold); }
.ft-medal-2 { background:#b7bec0; }
.ft-medal-3 { background:#c98b5e; }
.ft-lb-me .ft-lb-rank:not(.ft-medal) { font-size:13px; }
.ft-lb-who { display:grid; min-width:0; }
.ft-lb-name { font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ft-lb-meta { color:#b7bec0; font-size:13px; font-weight:500; }
.ft-lb-points { padding:8px 10px; border-radius:10px; background:var(--field-gold); color:var(--field-dark); white-space:nowrap; font:700 20px/1 var(--display-font); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ft-lb-me .ft-lb-points { color:var(--field-dark); }
.ft-lb-gap { display:flex; justify-content:center; gap:5px; padding:8px 0; }
.ft-lb-gap i { width:4px; height:4px; border-radius:50%; background:#6f7a7d; }
.ft-lb-note { margin:14px 0 0; color:#b7bec0; font-size:13px; text-align:center; }
@container (max-width:360px) {
  .ft-chips { gap:6px; }
  .ft-chip { padding:0 8px; font-size:13px; }
  .ft-lb-row { grid-template-columns:24px 32px minmax(0,1fr) auto; gap:10px; padding-inline:10px 12px; }
  .ft-lb-row .ft-avatar { width:32px; height:32px; }
  .ft-lb-points { font-size:18px; }
  .ft-seg-option { font-size:13px; padding-inline:4px; }
}

/* 7 · Friends feed */
.ft-post { padding:14px; border-radius:22px; background:#fff; border:1px solid rgba(17,47,55,.06); box-shadow:var(--ft-ring); }
.ft-post-head { display:flex; align-items:center; gap:10px; }
.ft-post-head>.ft-avatar { width:36px; height:36px; }
.ft-post-who { min-width:0; }
.ft-post-name { margin:0; font-size:15px; font-weight:800; }
.ft-post-time { margin:0; color:var(--marketing-muted); font-size:13px; }
.ft-points-chip { flex:none; display:inline-flex; align-items:center; gap:5px; margin-left:auto; padding:6px 12px 6px 10px; border-radius:999px; background:var(--field-gold); color:var(--field-dark); font:700 16px/1 var(--display-font); font-variant-numeric:tabular-nums; }
.ft-points-chip .ft-icon { width:15px; height:15px; fill:currentColor; stroke:none; }
.ft-post-sky { position:relative; aspect-ratio:16/8; margin-top:12px; overflow:hidden; border-radius:14px; }
.ft-post-plane { position:absolute; left:50%; top:50%; width:44%; max-width:210px; transform:translate(-50%,-52%) rotate(72deg); filter:drop-shadow(0 10px 10px rgba(17,47,55,.18)); }
.ft-post-flight { margin-top:12px; }
.ft-post-route { display:flex; align-items:center; gap:8px; margin:0; font-size:17px; }
.ft-post-route img { width:24px; height:24px; border-radius:6px; object-fit:contain; border:1px solid var(--marketing-line); }
.ft-post-route strong { font-weight:800; }
.ft-post-route>span { color:var(--marketing-muted); font-weight:700; }
.ft-post-meta { margin:3px 0 0; color:var(--marketing-muted); font-size:13px; line-height:1.45; }
.ft-post-tags { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; padding:0; list-style:none; }
.ft-post-tags li { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:4px 10px; border-radius:999px; background:var(--marketing-paper); color:var(--marketing-ink); font-size:13px; font-weight:600; }
.ft-post-tags .ft-icon { width:15px; height:15px; color:var(--marketing-muted); }
.ft-post-bar { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--marketing-line); }
.ft-like, .ft-comments { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px; border-radius:999px; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.ft-like { border:1px solid var(--marketing-line); background:#fff; color:var(--marketing-ink); }
.ft-like-static { color:var(--marketing-muted); }
button.ft-like:hover { border-color:#64838a; }
.ft-like[aria-pressed="true"] { border-color:#a6d7d6; background:var(--field-teal-tint); color:var(--field-teal-deep); }
.ft-like[aria-pressed="true"] .ft-icon { fill:currentColor; }
.ft-like .ft-icon { transition:transform .18s ease; }
.ft-like[aria-pressed="true"] .ft-icon { transform:scale(1.12); }
.ft-comments { color:var(--marketing-muted); }
.ft-post-comment { display:flex; align-items:center; gap:8px; margin:6px 0 0; padding:8px 10px; border-radius:12px; background:var(--marketing-paper); font-size:14px; line-height:1.4; }
.ft-post-comment .ft-avatar { width:26px; height:26px; font-size:12px; }
.ft-post-comment strong { margin-right:6px; }
.ft-feed-layout { display:grid; gap:28px; }
@container (min-width:620px) {
  .ft-feed-layout { grid-template-columns:minmax(0,1fr) minmax(0,330px); align-items:center; gap:28px; }
}

/* 8 · Shared aircraft */
.ft-pair { padding:16px; border-radius:20px; background:var(--marketing-paper); border:1px solid var(--marketing-line); }
.ft-pair-head { display:flex; align-items:center; gap:12px; }
.ft-pair-head>.ft-avatar { width:44px; height:44px; font-size:17px; }
.ft-pair-name { margin:0; font-size:17px; font-weight:800; }
.ft-pair-since { margin:0; color:var(--marketing-muted); font-size:13px; }
.ft-pair-stats { display:grid; gap:6px; margin:14px 0 0; }
.ft-pair-stats>div { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:8px 12px; border-radius:12px; background:#fff; }
.ft-pair-stats dt { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; white-space:nowrap; }
.ft-pair-stats dt .ft-icon { width:16px; height:16px; color:var(--field-teal-deep); }
.ft-pair-stats dd { margin:0; color:var(--marketing-muted); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ft-pair-airframe { margin-top:14px; padding:12px; border-radius:16px; background:#fff; border:1px solid var(--marketing-line); }
.ft-pair-airframe-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ft-pair-title { margin:0; font-size:15px; font-weight:800; }
.ft-pair-airframe .ft-ah-list { margin-top:10px; }
.ft-pair-airframe .ft-ah-row { background:var(--marketing-paper); }
.ft-pair-foot { display:flex; align-items:center; gap:8px; margin:10px 2px 0; color:var(--marketing-muted); font-size:13px; line-height:1.4; }
@container (max-width:340px) {
  .ft-pair { padding:10px; }
  .ft-pair-stats>div { flex-wrap:wrap; gap:2px 6px; padding-inline:8px; }
  .ft-pair-stats dt { gap:6px; font-size:13px; }
  .ft-pair-stats dt .ft-icon { width:14px; height:14px; }
  .ft-pair-stats dd { font-size:13px; letter-spacing:-.01em; }
  .ft-pair-airframe { padding:10px; }
  .ft-pair-title { font-size:14px; }
}
.ft-pair-foot .ft-icon { width:16px; height:16px; color:var(--field-teal-deep); }

/* Footer */
.ft-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 32px; margin-top:48px; padding-top:24px; border-top:1px solid var(--marketing-line); }
.ft-foot p { margin:0; max-width:620px; color:var(--marketing-muted); font-size:14px; line-height:1.6; }

/* A swapped list fades in briefly so the change is noticed; reduced motion swaps instantly. */
.ft-swap { animation:ft-swap .2s ease-out; }
@keyframes ft-swap { from { opacity:.25; } to { opacity:1; } }

/* Responsive */
@media (max-width:1100px) {
  .ft-intro { grid-template-columns:1fr; margin-bottom:56px; }
  .ft-card { padding:28px; }
}
@media (max-width:700px) {
  .ft-inner { padding-block:72px; }
  .ft-intro { margin-bottom:40px; }
  .ft-lede { font-size:17px; }
  .ft-group + .ft-group { margin-top:56px; }
  .ft-group-label { align-items:flex-start; }
  .ft-group-label p { font-size:16px; }
  .ft-group-label strong { display:block; font-size:19px; }
  .ft-grid { gap:16px; }
  .ft-card { padding:20px; gap:22px; border-radius:24px; }
  .ft-copy h3 { font-size:24px; }
  .ft-flown-map { height:170px; }
  .ft-flown-ticket { margin-inline:10px; }
  .ft-legend-map { min-height:230px; }
  .ft-foot { margin-top:40px; }
}

@media (prefers-reduced-motion:reduce) {
  .ft-swap { animation:none; }
  .ft-like[aria-pressed="true"] .ft-icon { transform:none; }
}

/* A single friends feature spans the section after the shared-aircraft card was removed. */
.ft-grid.ft-grid-friends { grid-template-columns:minmax(0,1fr); }
.ft-grid.ft-grid-friends>.ft-feed { grid-column:1 / -1; }