/* Features - the building blocks of Segora (features.html). Builds on about.css. */
.ft-hero { padding-bottom: 96px; }
.ft { padding-bottom: 20px; max-width: 1280px; }

/* The architecture: your systems -> the platform (three blocks) -> systems you reach */
.ft-arch { display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; gap: 34px; align-items: center; margin: -56px 0 34px; position: relative; }
.ft-side { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 6px 20px rgba(13,27,42,.08); position: relative; }
.ft-side-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
.ft-side ul { list-style: none; margin: 0; padding: 0; }
.ft-side li { font-size: 15px; color: var(--text); padding: 7px 10px; margin: 6px 0 0; border-radius: 8px; background: #f3f6fa; }
/* arrows from the sides into and out of the platform */
.ft-side::after { content: ""; position: absolute; top: 50%; width: 26px; height: 2px; background: var(--teal); }
.ft-in::after { right: -30px; }
.ft-out::after { left: -30px; }
.ft-side::before { content: ""; position: absolute; top: calc(50% - 5px); border: 6px solid transparent; }
.ft-in::before { right: -36px; border-left-color: var(--teal); border-right: 0; }
.ft-out::before { left: -10px; border-left-color: var(--teal); border-right: 0; }

.ft-platform { background: linear-gradient(160deg, var(--ink), var(--ink-2)); border-radius: 22px; padding: 22px 22px 24px; box-shadow: 0 14px 40px rgba(13,27,42,.25); }
.ft-platform-label { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 4px; color: #fff; font-weight: 700; font-size: 18px; letter-spacing: .3px; }
.ft-platform-label img { width: 26px; height: 26px; }
.ft-block { border-radius: 16px; padding: 18px; margin-top: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.ft-block-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 14px 2px; }
.ft-block-head h2 { margin: 0; font-size: 21px; color: #fff; }
.ft-block-head p { margin: 0; font-size: 16px; color: #a9bad1; }
.ft-design .ft-block-head h2 { color: #54d6c5; }
.ft-deliver .ft-block-head h2 { color: var(--amber); }
.ft-run .ft-block-head h2 { color: #9cc3ff; }
.ft-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ft-chip { background: #fff; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.ft-chip b { font-size: 17px; color: var(--ink); }
.ft-chip span { font-size: 15px; line-height: 1.45; color: var(--dim); }
.ft-design .ft-chip { border-top: 3px solid #19c3b1; }
.ft-deliver .ft-chip { border-top: 3px solid var(--amber); }
.ft-run .ft-chip { border-top: 3px solid #6aa5ff; }
.ft-chip.ft-chip-med { background: #f0fbf8; }
.ft-chip.ft-chip-wide { grid-column: 1 / -1; }

/* What it means for you */
.ft-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 30px; }
.ft-values div { background: #fff; border-radius: 14px; padding: 16px 18px; border-left: 4px solid var(--teal); box-shadow: 0 1px 3px rgba(13,27,42,.06); display: flex; flex-direction: column; gap: 4px; }
.ft-values b { font-size: 16px; color: var(--ink); }
.ft-values span { font-size: 14px; color: var(--dim); }

.ft-shots { margin: 0 0 30px; }
.ft-shots h2 { font-size: 20px; margin: 0 0 12px; color: var(--ink); }
.ft-shot-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ft-shot-row figure { margin: 0; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.ft-shot-row a { display: block; height: 190px; overflow: hidden; background: #f3f6fa; border-bottom: 1px solid var(--line); }
.ft-shot-row img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.ft-shot-row figcaption { padding: 10px 14px 12px; font-size: 13.5px; color: var(--dim); }
.ft-shot-row figcaption b { color: var(--ink); }
@media (max-width: 820px) { .ft-shot-row { grid-template-columns: 1fr; } .ft-shot-row a { height: 220px; } }
/* A feature told in detail: what it is and why it matters, beside screenshots of it */
.ft-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px; align-items: start; margin: 0 0 30px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 28px 30px; }
.ft-detail-flip .ft-detail-text { order: 2; }
.ft-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal-dark, #0e9c8e); }
.ft-detail h2 { margin: 0 0 10px; font-size: 24px; color: var(--ink); }
.ft-detail h3 { margin: 18px 0 6px; font-size: 16px; color: var(--ink); }
.ft-detail p { margin: 0 0 8px; color: #3b4a63; font-size: 15px; line-height: 1.55; }
.ft-detail ul { margin: 0; padding-left: 20px; color: #3b4a63; font-size: 15px; line-height: 1.55; }
.ft-detail li { margin: 0 0 6px; }
.ft-detail li b { color: var(--ink); }
.ft-detail .ft-more { margin-top: 14px; }
.ft-detail .ft-more a { font-weight: 700; color: var(--teal-dark, #0e9c8e); }
.ft-detail-shots { display: flex; flex-direction: column; gap: 14px; }
.ft-detail-shots figure { margin: 0; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.ft-detail-shots a { display: block; max-height: 420px; overflow: hidden; background: #f3f6fa; border-bottom: 1px solid var(--line); }
.ft-detail-shots img { width: 100%; height: auto; display: block; }
.ft-detail-flip .ft-detail-shots a { max-height: none; }
.ft-detail-shots figcaption { padding: 10px 14px 12px; font-size: 13.5px; color: var(--dim); }
.ft-detail-shots figcaption b { color: var(--ink); }
@media (max-width: 960px) {
  .ft-detail { grid-template-columns: 1fr; padding: 22px; }
  .ft-detail-flip .ft-detail-text { order: 0; }
}
.ft-not { padding: 18px 22px; border-radius: 14px; background: #fff8ef; border: 1.5px solid #f0c9a0; }
.ft-not h2 { margin: 0 0 6px; font-size: 18px; color: #8a4b10; }
.ft-not p { margin: 0; color: #4a3a1c; max-width: 900px; }
.ft .close { margin-top: 34px; }

@media (max-width: 1060px) {
  .ft-values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .ft-arch { grid-template-columns: 1fr; gap: 30px; margin-top: 24px; }
  .ft-side ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .ft-side li { margin: 0; }
  .ft-side::after { top: auto; left: calc(50% - 1px); right: auto; width: 2px; height: 20px; }
  .ft-in::after { bottom: -26px; }
  .ft-out::after { top: -26px; }
  .ft-side::before { top: auto; left: calc(50% - 6px); right: auto; border: 6px solid transparent; border-top-color: var(--teal); border-bottom: 0; }
  .ft-in::before { bottom: -32px; }
  .ft-out::before { top: -7px; }
}
@media (max-width: 520px) {
  .ft-chips, .ft-values { grid-template-columns: 1fr; }
}