/* ==========================================================================
   FMBackroom — marketing site
   The Night match palette and the three typefaces are carried verbatim from
   designs/backroom/theme.css so the site and the app read as one thing. The
   components below are the site's own: it has a nav bar, which the app does
   not, and it has to be read on a phone, which the app does not.
   ========================================================================== */

:root{
  /* Night match */
  --bg:#0B111E; --surface:#141C2E; --surface-2:#1A2336; --surface-3:#212C43;
  --line:#37455F; --line-soft:#2B3651;
  --text:#E9EEF7; --text-2:#9AA8BF; --text-3:#65748F;
  --blue:#2E63E8; --blue-lt:#5D8CFF; --red:#E23A31; --red-lt:#FF5A50;
  --gold:#F0B429; --green:#3ECF8E; --amber:#E8973D;

  --blue-tint:rgba(93,140,255,.14);
  --blue-edge:rgba(93,140,255,.30);
  --blue-wash:rgba(93,140,255,.06);
  --label:#8095C9;                    /* mono micro-caps: section titles */

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --r-lg:16px; --r-md:12px; --r-sm:9px;
  --edge:rgba(255,255,255,.07);
  --shadow:0 24px 60px -30px rgba(0,0,0,.95);

  --page:1180px;
  --gut:22px;
}

*{box-sizing:border-box}
html{scrollbar-color:#33456E transparent;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
img,svg{max-width:100%}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#33456E;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--blue-lt);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--blue);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--r-sm) 0;text-decoration:none;
}
.skip:focus{left:0}

/* ---- the hex field ----------------------------------------------------- */
/* Carried behind everything, exactly as the app carries it. */
.field{position:fixed;inset:0;z-index:0;pointer-events:none}
.field svg{width:100%;height:100%}
.glow{position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(150px)}
.glow.a{width:720px;height:720px;top:-330px;left:-210px;background:rgba(46,99,232,.30)}
.glow.b{width:640px;height:640px;bottom:-280px;right:-260px;background:rgba(226,58,49,.16)}
.glow.c{width:420px;height:420px;top:40%;right:-200px;background:rgba(46,99,232,.13)}

/* ---- type -------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.03em;line-height:1.12}
h1{font-size:clamp(32px,5.4vw,52px);font-weight:900;letter-spacing:-.05em}
h2{font-size:clamp(24px,3.4vw,33px);font-weight:800;letter-spacing:-.04em}
h3{font-size:18px;font-weight:700;letter-spacing:-.02em}
h4{font-size:15px;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 14px}
a{color:var(--blue-lt)}
a:hover{color:#93B4FF}
.lede{color:var(--text-2);font-size:clamp(16px,2vw,18.5px);max-width:62ch;margin:16px 0 0}
.sub{color:var(--text-2);max-width:70ch;margin:12px 0 0}
.note{color:var(--text-3);font-size:13.5px;max-width:78ch}
.note strong{color:var(--text-2);font-weight:500}
.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--label);margin:0 0 12px;display:flex;align-items:center;gap:9px;
}
.eyebrow::before{
  content:"";flex:0 0 auto;width:8px;height:9px;
  background:var(--red);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.mono{font-family:var(--mono)}
.t2{color:var(--text-2)} .t3{color:var(--text-3)}
.gold{color:var(--gold)} .green{color:var(--green)}

/* ---- shell ------------------------------------------------------------- */
.wrap{position:relative;z-index:1;max-width:var(--page);margin:0 auto;padding:0 var(--gut)}
main{position:relative;z-index:1}
section{padding:64px 0}
section.tight{padding:44px 0}
.rule{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,var(--red),rgba(226,58,49,.5) 90px,var(--line-soft) 320px,rgba(43,54,81,0))}

/* ---- nav --------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:40;background:rgba(11,17,30,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);
}
.nav .wrap{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);margin-right:auto}
.brand img{display:block;width:32px;height:32px}
.wordmark{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.045em}
.wordmark i{font-style:normal;color:var(--text-2)}
.wordmark em{font-style:normal;color:var(--red-lt)}
.navlinks{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.navlinks a{
  color:var(--text-2);text-decoration:none;font-size:14px;padding:7px 12px;border-radius:var(--r-sm);
}
.navlinks a:hover{color:var(--text);background:var(--blue-wash)}
.navlinks a[aria-current=page]{color:var(--text);background:var(--blue-tint);box-shadow:inset 0 0 0 1px var(--blue-edge)}

/* ---- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--surface-3);box-shadow:inset 0 1px 0 var(--edge);
  border:1px solid var(--line);color:var(--text);border-radius:var(--r-sm);
  padding:10px 18px;font-family:var(--body);font-size:14.5px;font-weight:500;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:border-color .12s,background .12s,transform .12s;
}
.btn:hover{border-color:var(--blue-edge);background:var(--blue-wash);color:var(--text)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#3A72F0;border-color:#3A72F0;color:#fff}
.btn.sm{padding:7px 14px;font-size:13.5px}
.btn.block{width:100%}
.btnrow{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}

/* ---- hero -------------------------------------------------------------- */
.hero{padding:66px 0 52px}
/* The full-detail draw is specified for 96px and up; below that the mark uses
   the flatter mid draw, which is what the nav and footer carry. */
.hero .mark{display:block;width:96px;height:96px;margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--red-lt)}
.facts{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--line-soft);
}
.fact{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
  border:1px solid var(--line-soft);border-radius:999px;padding:5px 13px;
}
.fact::before{
  content:"";width:7px;height:8px;flex:0 0 auto;background:var(--blue-lt);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.fact.free::before{background:var(--green)}

/* ---- cards / grids ----------------------------------------------------- */
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 var(--edge);padding:20px;
}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card p{color:var(--text-2);font-size:14px}

/* the card head band, borrowed from the app's panel header */
.card.panel{padding:0;overflow:hidden}
.card.panel .hd{
  display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);
}
.card.panel .bd{padding:18px 16px}

/* ---- anchored sections ------------------------------------------------- */
/* One page, so the nav links are anchors. Everything with an id has to clear
   the sticky header when it is jumped to. */
[id]{scroll-margin-top:78px}

/* A sub-head inside a long section — what used to be its own page. */
.section-sub{
  font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.035em;
  margin:40px 0 16px;padding-top:28px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:10px;
}
.section-sub::before{
  content:"";flex:0 0 auto;width:9px;height:10px;background:var(--red);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
/* The sub-head already draws the rule, so whatever follows must not draw it again. */
.section-sub + .feature,.callout + .feature,.sub + .feature{border-top:0;padding-top:10px}

/* ---- feature blocks ---------------------------------------------------- */
.feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:34px;align-items:center;
  padding:38px 0;border-top:1px solid var(--line-soft);
}
.feature:first-of-type{border-top:0}
@media(max-width:820px){.feature{grid-template-columns:1fr;gap:20px;padding:28px 0}}
.feature .shot{
  border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow);position:relative;
}
.feature .shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--red),rgba(226,58,49,0) 55%);opacity:.75;
}
.feature .shot img,.feature .shot svg{display:block;width:100%;height:auto}
.feature.flip .shot{order:-1}
@media(max-width:820px){.feature.flip .shot{order:0}}
.feature ul{margin:14px 0 0;padding:0;list-style:none;color:var(--text-2);font-size:14px}
.feature li{position:relative;padding-left:19px;margin-bottom:7px}
.feature li::before{
  content:"";position:absolute;left:0;top:8px;width:8px;height:9px;background:var(--blue-lt);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* tier tag on a feature */
.tag{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:3px 10px;
  border:1px solid var(--line);color:var(--text-3);vertical-align:middle;margin-left:10px;
  white-space:nowrap;
}
.tag.free{color:var(--green);border-color:rgba(62,207,142,.35)}
.tag.paid{color:var(--gold);border-color:rgba(240,180,41,.38)}
.tag.soon{color:var(--blue-lt);border-color:var(--blue-edge);background:var(--blue-wash)}
.tag + .tag{margin-left:6px}

/* ---- coming soon ------------------------------------------------------- */
.card ul{margin:13px 0 0;padding:0;list-style:none;color:var(--text-2);font-size:14px}
.card li{position:relative;padding-left:19px;margin-bottom:7px}
.card li:last-child{margin-bottom:0}
.card li::before{
  content:"";position:absolute;left:0;top:8px;width:8px;height:9px;background:var(--blue-lt);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:.5;
}
.tier li .tag{margin-left:8px}

/* ---- pricing ----------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start}
.tier{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 var(--edge);padding:26px;display:flex;flex-direction:column;
}
.tier.lead{border-color:var(--blue-edge);box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px rgba(93,140,255,.12),var(--shadow)}
.tier .name{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--label);
}
.tier .price{font-family:var(--display);font-weight:900;font-size:44px;letter-spacing:-.05em;margin:14px 0 0;line-height:1}
.tier .price span{font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:0;color:var(--text-3);margin-left:6px}
.tier .who{color:var(--text-2);font-size:14px;margin:12px 0 20px;min-height:44px}
.tier ul{margin:0 0 22px;padding:0;list-style:none;font-size:14px;color:var(--text-2);flex:1}
.tier li{position:relative;padding-left:24px;margin-bottom:9px}
.tier li::before{
  content:"";position:absolute;left:0;top:7px;width:9px;height:10px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--green);
}
.tier.lead li::before{background:var(--gold)}
.tier li strong{color:var(--text);font-weight:500}
.tier .after{margin:14px 0 0;font-size:12.5px;color:var(--text-3)}

/* comparison table */
.tablewrap{
  border:1px solid var(--line-soft);border-radius:var(--r-md);overflow-x:auto;
  background:var(--surface);box-shadow:inset 0 1px 0 var(--edge);
}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
caption{
  text-align:left;padding:12px 16px;background:var(--surface-2);color:var(--label);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--line-soft);
}
th,td{padding:11px 16px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
thead th{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;background:var(--surface-2);
}
tbody th{font-weight:500;color:var(--text);font-size:14px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.mark-col{width:132px;text-align:center;font-family:var(--mono);font-size:13px}
th.mark-col{text-align:center}
.yes{color:var(--green)}
.no{color:var(--text-3)}
.soon-mark{color:var(--blue-lt)}
tbody th a{color:inherit}

/* ---- faq --------------------------------------------------------------- */
.faq{border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;padding:15px 18px;font-family:var(--display);font-weight:600;font-size:15.5px;
  letter-spacing:-.02em;list-style:none;display:flex;align-items:flex-start;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"";flex:0 0 auto;width:10px;height:11px;margin-top:6px;background:var(--text-3);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background .12s;
}
.faq summary:hover{background:var(--blue-wash)}
.faq details[open] summary::before{background:var(--blue-lt)}
.faq .a{padding:0 18px 17px 40px;color:var(--text-2);font-size:14.5px}
.faq .a p:last-child{margin-bottom:0}

/* ---- callout ----------------------------------------------------------- */
.callout{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
  padding:18px 20px;color:var(--text-2);font-size:14px;
}
.callout.warn{border-color:rgba(232,151,61,.32);background:rgba(232,151,61,.06);color:#E9C48D}
.callout strong{color:var(--text);font-weight:500}
.callout.warn strong{color:#F3D9AE}

/* ---- steps ------------------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:18px;box-shadow:inset 0 1px 0 var(--edge);
}
.step .n{
  font-family:var(--mono);font-size:10px;color:var(--blue-lt);border:1px solid var(--blue-edge);
  border-radius:5px;padding:2px 7px;display:inline-block;margin-bottom:11px;
}
.step h3{font-size:15.5px;margin-bottom:6px}
.step p{color:var(--text-2);font-size:13.5px;margin:0}

/* ---- cta band ---------------------------------------------------------- */
.band{
  border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:inset 0 1px 0 var(--edge),var(--shadow);padding:34px;text-align:center;
}
.band .btnrow{justify-content:center}
.band p{margin:12px auto 0;color:var(--text-2);max-width:56ch}

/* ---- footer ------------------------------------------------------------ */
footer{
  position:relative;z-index:1;border-top:1px solid var(--line-soft);margin-top:36px;
  padding:34px 0 48px;background:rgba(20,28,46,.55);
}
.foot{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot .col{min-width:150px}
.foot .col h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);margin-bottom:11px;font-weight:500;
}
.foot .col a{display:block;color:var(--text-2);text-decoration:none;font-size:14px;margin-bottom:7px}
.foot .col a:hover{color:var(--text)}
.foot .brand{margin-right:auto}
/* The maker's credit under the disclaimer. pendragon.png is the silhouette in white on
   transparent (the sword is a cut-out), so it reads on the dark footer; dimmed like the
   footer links until hovered. */
.maker{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--text-3);
  text-decoration:none;font-size:13px;
}
.maker img{opacity:.75;transition:opacity .15s}
.maker:hover{color:var(--text)}
.maker:hover img{opacity:1}
.disclaimer{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft);
  color:var(--text-3);font-size:12.5px;max-width:80ch;
}
.disclaimer p{margin:0 0 8px}
.disclaimer p:last-child{margin:0}

@media(max-width:640px){
  section{padding:46px 0}
  .hero{padding:44px 0 38px}
  .tier{padding:22px}
  .band{padding:26px 20px}
}

/* ---- two tiers --------------------------------------------------------- */
.callout.annual{border-color:rgba(240,180,41,.32);background:rgba(240,180,41,.06)}
.callout.annual strong{color:var(--gold)}
.tier li .tag.soon{margin-left:0;margin-top:4px;display:inline-flex}
@media(min-width:1000px){.tiers{grid-template-columns:repeat(2,1fr)}}

/* ---- the seven pages --------------------------------------------------- */
.pages .card h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pages .card h3 .tag{margin-left:4px}
.pages .card h3 .tag + .tag{margin-left:0}
.feature h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.feature h3 .tag{margin-left:4px}
.feature h3 .tag + .tag{margin-left:0}

/* ---- generated faces, aged ----------------------------------------------- */
/* Real output from the face pipeline: one newgen's portrait at 16, then the same
   face moved to each age band the ageing model uses. Sits inside a .shot. */
.agestrip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:14px 14px 12px;background:var(--surface)}
.agestrip figure{margin:0;text-align:center}
.agestrip img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line-soft);background:#0B111E}
.agestrip figcaption{
  margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.agestrip figure:first-child figcaption,.agestrip figure:last-child figcaption{color:var(--blue-lt)}
.agestrip .arrow{position:relative}
@media(max-width:420px){.agestrip{gap:5px;padding:10px}}

/* ---- FM Titans as stickers ----------------------------------------------- */
/* Three cards fanned out, the centre one a 90s sticker-album "shiny". No JS:
   the foil is layered gradients, the sheen a slow keyframe that reduced-motion
   switches off along with everything else. */
.titans{
  position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;
  padding:26px 18px 22px;background:
    radial-gradient(120% 90% at 50% 100%,rgba(46,99,232,.22),transparent 60%),
    var(--surface);
  overflow:hidden;
}
.tcard{
  position:relative;flex:0 0 auto;width:31%;max-width:168px;aspect-ratio:5/7;border-radius:10px;
  background:#F3EBD8;color:#1A1A1A;padding:7px;display:flex;flex-direction:column;
  box-shadow:0 18px 34px -16px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.6);
  transform-origin:50% 100%;
}
.tcard.left{transform:rotate(-7deg) translate(10px,10px);z-index:1}
.tcard.right{transform:rotate(7deg) translate(-10px,10px);z-index:1}
.tcard.centre{width:36%;max-width:196px;z-index:2;transform:translateY(-6px);
  background:#F7F1E3;box-shadow:0 26px 44px -18px rgba(0,0,0,.95),0 0 0 1px rgba(240,180,41,.35)}
.tcard .pic{
  position:relative;flex:1 1 auto;min-height:0;border-radius:6px;overflow:hidden;
  border:1px solid rgba(0,0,0,.18);background:#DDD5C2;
}
.tcard .pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.tcard .meta{padding:7px 3px 2px;line-height:1.15}
.tcard .name{
  font-family:var(--display);font-weight:900;font-size:clamp(10px,1.35vw,14px);letter-spacing:-.03em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tcard .club{font-family:var(--mono);font-size:clamp(8px,.95vw,10px);letter-spacing:.06em;text-transform:uppercase;color:#4A4336;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard .era{
  display:inline-block;margin-top:5px;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(0,0,0,.28);border-radius:999px;padding:1px 7px;color:#1A1A1A;
}
/* the shiny */
.tcard.centre .pic{border-color:rgba(0,0,0,.28)}
.tcard.centre::before{
  content:"";position:absolute;inset:0;border-radius:10px;z-index:0;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 6px,rgba(255,255,255,.28) 6px 7px),
    conic-gradient(from 200deg at 50% 45%,#F6C1C1,#FCE39B,#B9F2CF,#B8DDFF,#D9BDFF,#FFC0E6,#F6C1C1);
  background-size:100% 100%,100% 100%;
}
.tcard.centre::after{
  content:"";position:absolute;inset:0;border-radius:10px;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 46%,rgba(255,255,255,0) 60%);
  background-size:260% 100%;background-position:120% 0;animation:sheen 5.5s ease-in-out infinite;
}
@keyframes sheen{0%,25%{background-position:120% 0}70%,100%{background-position:-60% 0}}
.tcard.centre>*{position:relative;z-index:1}
.tcard.centre .meta{background:rgba(247,241,227,.78);border-radius:5px;margin-top:6px;padding:6px 6px 5px}
.tcard.centre .era{border-color:rgba(0,0,0,.45)}
@media(max-width:820px){.titans{padding:22px 10px 18px}}
@media(max-width:600px){
  .tcard{width:34%;padding:5px}
  .tcard.centre{width:40%}
  .tcard .name{white-space:normal;font-size:10.5px;line-height:1.05}
  .tcard .club{font-size:8px;letter-spacing:.03em}
  .tcard .era{font-size:7.5px;margin-top:3px}
  .tcard .meta{padding:5px 2px 2px}
  .tcard.centre .meta{padding:5px 4px 4px}
}

/* ---- the feature card in the pages grid ---------------------------------- */
/* Face generation is not one of the seven pages: it takes the eighth slot in
   the grid and carries the red edge the page cards do not. */
.pages .featurecard{
  border-color:rgba(255,90,80,.42);
  background:linear-gradient(180deg,rgba(226,58,49,.10),rgba(226,58,49,0) 60%),var(--surface-2);
  box-shadow:inset 3px 0 0 var(--red),inset 0 1px 0 var(--edge);
}
/* HIDDEN FOR V1: with FM Titans out there are six page cards, so the face card
   takes two slots to close the last row. Drop the class from index.html when
   Titans ships. Only where the grid has two columns or more: a span in a
   one-column grid adds a column. */
@media(min-width:620px){.pages .featurecard--wide{grid-column:span 2}}