/* What FUT Flipper is and what a customer gets (showcase.js), and the get-started card on the desk (get-started.js). */
.sc {
  margin: 56px 0 8px;
  display: grid;
  gap: 64px;
}
.sc-block > .kicker {
  display: inline-block;
}
.sc-h {
  margin: 10px 0 22px;
  font: 650 clamp(28px, 3.4vw, 42px) / 1.15 var(--sans);
  letter-spacing: -0.035em;
  text-transform: none;
}
.sc-features {
  display: grid;
  gap: 44px;
}
.sc-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 36px;
  align-items: center;
}
.sc-feature.is-flip .sc-copy {
  order: 2;
}
.sc-copy h3 {
  margin: 8px 0 10px;
  font: 650 clamp(24px, 2.8vw, 32px) / 1.15 var(--sans);
  text-transform: none;
}
.sc-copy p {
  margin: 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.6;
}
.sc-shot {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  background: #050b08;
  box-shadow:
    0 24px 60px -28px #000,
    0 0 0 1px #ffffff0a inset;
}
.sc-img {
  display: block;
  width: 100%;
  height: auto;
}
.sc-start {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  counter-reset: start;
}
.sc-start li {
  counter-increment: start;
  padding: 18px 18px 18px 56px;
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  font-weight: 600;
  line-height: 1.4;
}
.sc-start li::before {
  content: counter(start);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pitch);
  color: #03140b;
  font-weight: 800;
}
.sc-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 880px;
}
.sc-compare:has(> .sc-plan:only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 520px;
}
.sc-plan {
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
}
.sc-plan.is-main {
  border-color: #22e88973;
  background: linear-gradient(#0d2218, var(--surface));
}
.sc-plan h3 {
  margin: 0 0 6px;
  font: 700 18px var(--sans);
}
.sc-plan b {
  display: block;
  margin-bottom: 14px;
  font: 800 38px / 1 var(--display);
}
.sc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--ink-2);
  max-width: 62em;
}
.sc-list li {
  position: relative;
  padding-left: 26px;
  line-height: 1.5;
}
.sc-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--pitch);
  border-bottom: 2px solid var(--pitch);
  transform: rotate(-45deg);
}
.sc-faq {
  display: grid;
  gap: 10px;
  max-width: 880px;
}
.sc-faq details {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px 20px;
}
.sc-faq summary {
  cursor: pointer;
  font-weight: 700;
}
.sc-faq p {
  margin: 10px 0 0;
  color: var(--ink-2);
  line-height: 1.6;
}
.sc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sc-getstarted {
  margin: 0 0 16px;
  border-color: #22e88973;
}
.sc-getstarted h3 {
  margin: 0 0 6px;
  font-size: 20px;
}
.sc-days {
  margin: 0 0 8px;
  color: var(--gold);
  font-weight: 700;
}
.sc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}
.sc-note {
  min-height: 1.4em;
  margin: 6px 0 0;
  color: var(--ink-2);
}
.sc-steps {
  margin: 12px 0 10px;
  padding-left: 22px;
  color: var(--ink-2);
  display: grid;
  gap: 4px;
}
.sc-guide {
  font-weight: 600;
}
@media (max-width: 860px) {
  .sc {
    gap: 48px;
  }
  .sc-feature,
  .sc-compare {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .sc-feature.is-flip .sc-copy {
    order: 0;
  }
  .sc-start {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hero-offer {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.hero-offer span {
  color: var(--ink-2);
  font-weight: 600;
  margin-right: 4px;
}
.home-aside { min-width:0; }
.home-aside .fan { height:230px; margin-top:0; }
.home-aside .fan .fut { width:146px; margin:-104px 0 0 -73px; }
.home-index { border-top:1px solid var(--line-strong); }
.index-label { display:block; padding:16px 0; color:var(--mut); font:600 11px var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.home-index a { display:flex; align-items:center; gap:18px; padding:17px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.home-index a:hover b { color:var(--pitch); }
.home-index small { color:var(--pitch); font-size:11px; font-variant-numeric:tabular-nums; }
.home-index span { flex:1; }
.home-index b { display:block; font-size:17px; font-weight:550; }
.home-index em { display:block; color:var(--mut); font-size:12px; font-style:normal; }
.home-index i { font-size:24px; font-style:normal; color:var(--mut); }
.home-product { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-top:64px; padding:36px 0; border-block:1px solid var(--line-strong); }
.home-product h2 { margin:8px 0 16px; font:600 clamp(28px,3vw,40px)/1.14 var(--sans); letter-spacing:-.04em; }
.home-product p { max-width:480px; color:var(--mut); margin:0; }
#home > .grid .card { background:none; border:0; border-top:1px solid var(--line-strong); border-radius:0; padding:24px 0; box-shadow:none; }
#home > .grid .icon { background:none; border:0; border-radius:0; width:28px; height:28px; margin-bottom:20px; }
#home > .grid h3 { font:600 20px var(--sans); }
#product { padding-top:36px; }
#product .app-band { margin-top:0; background:none; padding:0 0 32px; border:0; border-radius:0; }
#product .app-band h2 { font-size:clamp(34px,4vw,54px); }
#product .steps { gap:0; border-block:1px solid var(--line-strong); }
#product .steps .card { border:0; border-radius:0; box-shadow:none; background:none; padding:30px; }
#product .steps .card + .card { border-left:1px solid var(--line); }
#product .steps h3 { font:600 19px var(--sans); }
#prices > .h1 { font-size:clamp(30px,3.5vw,42px); margin:12px 0; }
#prices > .lead { max-width:760px; font-size:14px; }
#prices > .aff-card { margin:24px 0 0; padding:14px 18px; font-size:13px; }
#tools > .h1 { font-size:clamp(32px,4vw,48px); }
#tools > .lead { max-width:860px; font-size:15px; }
#tools > .grid { align-items:start; }
#tools > .grid > .card { border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:none; }
#tools h3 { font:600 20px var(--sans); }
#plans > .h1 { max-width:15ch; font-size:clamp(36px,4.6vw,58px); }
#plans .plan { border-radius:12px; box-shadow:none; }
#plans .plan h3 { font-family:var(--sans); letter-spacing:-.03em; }
#guide > .h1 { font-family:var(--sans); }
#guide-player { margin-top:28px; }
#guide-chapters .chip { border-radius:6px; font-weight:500; }
#downloads .dl-hero { padding:32px 0; }
#downloads .dl-pitch { display:none; }
#downloads .dl-card { background:var(--panel); border:1px solid var(--line-strong); box-shadow:none; border-radius:12px; }
@media (max-width:860px) {
  .home-aside .fan { display:none; }
  .home-index { margin-top:12px; }
  .home-product { align-items:flex-start; flex-direction:column; }
  #product .steps .card { padding:22px 0; }
  #product .steps .card + .card { border-left:0; border-top:1px solid var(--line); }
}
@media (min-width: 981px) {
  .app-band.has-video { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); column-gap:40px; align-items:start; }
  .app-band.has-video > * { grid-column:1; }
  .app-band.has-video > .band-video { grid-column:2; grid-row:1 / span 4; margin:0; align-self:center; }
  .app-band.has-video > .stat-row { grid-column:1 / -1; grid-row:5; }
  .app-band.has-video > .trust { grid-column:1 / -1; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .app-band.has-video > .cta-row { grid-row:4; margin:20px 0 0; }
}
.app-band > .lead { font-size:16px; }
.app-band .trust li { border:0; border-radius:0; padding:0 12px 0 0; background:none; }
.app-band .trust { gap:24px; }
@media (max-width: 640px) {
  .app-band .stat-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-band .trust { grid-template-columns:1fr; gap:16px; }
  .hero { padding-top:28px; gap:12px; }
}

.band-video {
  margin-top: 22px;
}
.band-note {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 15px;
}
.sc-strip {
  margin: 48px 0 8px;
  padding: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  border: 1px solid #22e8897a;
  border-radius: 18px;
  background: linear-gradient(120deg, #0d2a1c, var(--surface));
}
/* Under a page's opening line (prices, lists, tools) it sits close to it. */
.lead + .sc-strip {
  margin: 18px 0 22px;
}
.sc-strip b {
  display: block;
  font: 800 26px / 1.1 var(--display);
  letter-spacing: 0.02em;
  text-transform: none;
}
.sc-strip span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  max-width: 46em;
}
.sc-strip-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sc-auth-trial {
  margin: 8px 0 12px;
  color: var(--pitch);
  font-weight: 600;
  font-size: 14px;
}

/* The product story uses a feature list, with downloads as a separate utility area. */
#product .product-features { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; row-gap:0; }
#product .product-features .card { display:grid; grid-template-columns:34px 1fr; gap:0 20px; padding:24px 0; border:0; border-top:1px solid var(--line-strong); border-radius:0; background:none; box-shadow:none; }
#product .product-features .icon { grid-column:1; grid-row:1 / span 2; width:30px; height:30px; border:0; border-radius:0; background:none; }
#product .product-features h3,#product .product-features p { grid-column:2; margin:0 0 8px; }
#product .product-features h3 { font:600 18px var(--sans); }
#product .download { background:var(--panel); box-shadow:none; border-color:var(--line); border-radius:8px; }
@media (max-width:640px) { #product .product-features { grid-template-columns:1fr; } }

.plans-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; align-items:start; padding:24px 0 32px; }
.plans-copy .h1 { font-size:clamp(36px,4.6vw,58px); }
.plans-copy .lead { font-size:17px; }
.plans-purchase #plan-grid { grid-template-columns:1fr; margin:0; }
.plans-purchase .checkout-note { margin-top:20px; font-size:12px; }
@media (max-width:980px) {
  .app-band.has-video { display:flex; flex-direction:column; }
  .app-band.has-video > .band-video { order:4; width:100%; margin-top:24px; }
  .app-band.has-video > .stat-row { order:5; width:100%; }
  .app-band.has-video > .trust { order:6; width:100%; }
  .plans-layout { grid-template-columns:1fr; gap:28px; }
}