/* Features page. Tokens come from landing.css (dark by default, light under [data-theme=light]).
   Motion: cards lift and warm on hover, the product frame breathes and tilts under the pointer,
   the curve draws itself in when it scrolls into view. All of it is off under reduced motion. */
.fx{--ease:cubic-bezier(.2,.8,.2,1);--lift:0 28px 60px -32px rgba(0,0,0,.65);--glow:0 0 0 1px var(--gold)}
.fx-body main{overflow-x:clip}
.fx h1,.fx h2,.fx h3{font-family:var(--display);font-weight:600;line-height:1.08;color:var(--text);margin:0}
.fx h1{font-size:clamp(2.3rem,4.3vw,3.5rem);letter-spacing:-.01em;max-width:15ch}
.fx h1 em,.fx h2 em{font-style:italic;color:var(--gold)}
.fx h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.fx h3{font-size:1.35rem}
.fx p{color:var(--muted);line-height:1.6}
.fx .eyebrow{display:block;margin-bottom:var(--space-4)}
.fx-lede{font-size:1.05rem;max-width:44ch;margin:var(--space-6) 0 var(--space-8)}

/* Buttons on the dark surfaces: the homepage's outline style was drawn for its paper hero. */
.fx .button{margin:0}
.fx .button.outline{background:transparent;color:var(--text);border:1px solid color-mix(in srgb,var(--gold) 60%,var(--line));box-shadow:none;transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.fx .button.outline:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);transform:translateY(-2px)}

/* Hero, over a photograph: full-bleed, washed toward the page colour on the copy side and
   at the bottom edge, so the type stays legible in both themes. */
.fx-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding-top:clamp(1rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
.fx-hero .hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--space-3);margin:0}
.fx-hero .hero-note{margin-top:var(--space-4);font-size:var(--text-sm);text-align:left}

/* The product frame: the workspace as it renders, built from real output */
.fx-frame{margin:0;perspective:1400px}
.fx-window{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.2);transform-style:preserve-3d;transition:transform .6s var(--ease),box-shadow .6s var(--ease);will-change:transform}
.fx-frame:hover .fx-window{box-shadow:0 60px 110px -40px rgba(0,0,0,.85),var(--glow)}
.fx-window-bar{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:.7rem 1rem;border-bottom:1px solid var(--line);font-size:.72rem;color:var(--muted)}
.fx-window-title{font-family:var(--display);font-size:1.05rem;color:var(--text)}
.fx-window-body{display:grid;grid-template-columns:150px minmax(0,1fr)}
.fx-window-nav{display:flex;flex-direction:column;gap:.15rem;padding:.8rem .6rem;border-right:1px solid var(--line);font-size:.7rem;color:var(--muted)}
.fx-window-nav span{padding:.35rem .55rem;border-radius:6px}
.fx-window-nav .on{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--text)}
.fx-panel{padding:1rem 1.1rem 1.1rem;min-width:0}
.fx-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.fx-panel-head h2{font-size:1.1rem}
.fx-panel-head span{font-size:.66rem;color:var(--muted)}
.fx-panel-lede{font-size:.74rem;margin:.35rem 0 .5rem}
.fx-curve{display:block;width:100%;height:auto}
.fx-grid{stroke:var(--line);stroke-width:1}
.fx-tick,.fx-axis text{fill:var(--muted);font-size:9px;font-family:var(--body)}
.fx-axis-label{letter-spacing:.08em;font-size:8px}
.fx-area{fill:var(--gold);opacity:.14}
.fx-line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:700}
.fx-dots circle{fill:var(--surface);stroke:var(--gold);stroke-width:1.5;opacity:0;transition:r .3s var(--ease)}
.fx-dots .peak{fill:var(--gold)}
.fx-dots circle:hover{r:6}
.fx-frame.is-in .fx-line{animation:fx-draw 1.6s var(--ease) forwards}
.fx-frame.is-in .fx-dots circle{animation:fx-appear .5s var(--ease) forwards}
.fx-frame.is-in .fx-dots circle:nth-child(1){animation-delay:.2s}.fx-frame.is-in .fx-dots circle:nth-child(2){animation-delay:.4s}.fx-frame.is-in .fx-dots circle:nth-child(3){animation-delay:.6s}.fx-frame.is-in .fx-dots circle:nth-child(4){animation-delay:.8s}.fx-frame.is-in .fx-dots circle:nth-child(5){animation-delay:1s}.fx-frame.is-in .fx-dots circle:nth-child(6){animation-delay:1.2s}.fx-frame.is-in .fx-dots circle:nth-child(7){animation-delay:1.4s}.fx-frame.is-in .fx-dots circle:nth-child(8){animation-delay:1.6s}
@keyframes fx-draw{to{stroke-dashoffset:0}}
@keyframes fx-appear{to{opacity:1}}
.fx-curve-label{font-size:.66rem;text-align:center;margin:.1rem 0 .7rem}
.fx-finding{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);background:color-mix(in srgb,var(--gold) 8%,transparent);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:.65rem .8rem}
.fx-finding h3{font-family:var(--body);font-weight:600;font-size:.78rem;line-height:1.35}
.fx-finding p{font-size:.7rem;margin:.15rem 0 0}
.fx-inspect{flex-shrink:0;font-size:.7rem;color:var(--gold);border:1px solid var(--line);border-radius:8px;padding:.35rem .6rem;text-decoration:none;transition:background .3s var(--ease),transform .3s var(--ease)}
.fx-inspect:hover{background:color-mix(in srgb,var(--gold) 16%,transparent);transform:translateX(2px)}
.fx-frame figcaption{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--muted);text-align:center}

/* Sections */
.fx-section{padding:clamp(3rem,7vw,6rem) clamp(1.25rem,5vw,5rem)}
.fx-section-intro{max-width:72ch;margin:0 auto var(--space-12);text-align:center}
.fx-section-intro p{margin-top:var(--space-4)}
.fx-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}

/* Cards: the breathing surface */
.fx-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--space-8);transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}
.fx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--gold) 12%,transparent),transparent 45%);opacity:0;transition:opacity .55s var(--ease);pointer-events:none}
.fx-card:hover{transform:translateY(-6px);box-shadow:var(--lift);border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.fx-card:hover::after{opacity:1}
.fx-icon{width:28px;height:28px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--space-4);transition:transform .55s var(--ease)}
.fx-card:hover .fx-icon{transform:translateY(-2px) scale(1.06)}
.fx-kicker{display:block;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-3)}
.fx-card h3{margin-bottom:var(--space-3)}
.fx-card>p{font-size:var(--text-sm)}
.fx-list{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:.55rem}
.fx-list li{position:relative;padding-left:1.7rem;font-size:var(--text-sm);color:var(--text)}
.fx-list li::before{content:"";position:absolute;left:0;top:.2em;width:.95rem;height:.95rem;border:1.5px solid var(--gold);border-radius:50%;opacity:.7;transition:opacity .4s var(--ease),background .4s var(--ease)}
.fx-list li::after{content:"";position:absolute;left:.29rem;top:.42em;width:.28rem;height:.5rem;border:solid var(--gold);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);opacity:.7;transition:opacity .4s var(--ease),border-color .4s var(--ease)}
.fx-card:hover .fx-list li::before{opacity:1;background:color-mix(in srgb,var(--gold) 12%,transparent)}
.fx-card:hover .fx-list li::after{opacity:1}

/* Book Intelligence */
.fx-intel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 4%,transparent),transparent)}
.fx-intel-copy p{margin:var(--space-4) 0 var(--space-6)}
.fx-inline-list{list-style:none;margin:0 0 var(--space-8);padding:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:var(--text-sm);color:var(--text)}
.fx-inline-list li::before{content:"·";color:var(--gold);margin-right:.5rem}
.fx-intel-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4)}
.fx-excerpt p{font-family:var(--display);font-size:1.15rem;line-height:1.5;color:var(--text);margin:0 0 .8rem}
.fx-excerpt mark{background:color-mix(in srgb,var(--gold) 22%,transparent);color:inherit;padding:0 .15em;border-bottom:1px solid var(--gold)}
.fx-insight h3{font-size:1.1rem;margin-bottom:var(--space-3)}
.fx-insight p{font-size:var(--text-sm)}
.fx-note{display:block;margin-top:var(--space-4);font-size:var(--text-xs);color:var(--muted)}

/* Genres */
.fx-genres{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.fx-genre-copy p{margin-top:var(--space-4)}
.fx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.fx-chips li{border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-size:var(--text-sm);color:var(--text);background:var(--surface);transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease)}
.fx-chips li.nf{border-style:dashed}
.fx-chips li:hover{transform:translateY(-3px);border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface))}

/* Close */
.fx-close{text-align:center;padding-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(3rem,7vw,6rem)}
.fx-close h2{margin-bottom:var(--space-8)}
.fx-close .hero-note{margin-top:var(--space-4)}

/* Reveal on scroll */
.fx-reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fx-reveal.is-in{opacity:1;transform:none}
.fx-card.fx-reveal.is-in{transform:none}
.fx-card.fx-reveal.is-in:hover{transform:translateY(-6px)}

@media(max-width:960px){
  .fx-hero,.fx-intel,.fx-genres{grid-template-columns:1fr}
  .fx-columns{grid-template-columns:1fr}
  .fx h1{max-width:none}
  .fx-window-body{grid-template-columns:1fr}
  .fx-window-nav{display:none}
}
@media(max-width:600px){
  .fx-intel-demo{grid-template-columns:1fr}
  .fx-finding{flex-direction:column;align-items:flex-start}
  .fx-card{padding:var(--space-6)}
}
@media(prefers-reduced-motion:reduce){
  .fx-reveal{opacity:1;transform:none;transition:none}
  .fx-line{stroke-dashoffset:0;animation:none!important}
  .fx-dots circle{opacity:1;animation:none!important}
  .fx-card,.fx-chips li,.fx-window,.fx-icon,.fx-inspect{transition:none}
  .fx-card:hover,.fx-chips li:hover{transform:none}
}

.fx-hero-art{position:absolute;top:-1px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;overflow:hidden;pointer-events:none}
.fx-hero-art img{width:100%;height:112%;object-fit:cover;object-position:center 64%;opacity:.78;filter:saturate(.9);will-change:transform}
[data-theme=light] .fx-hero-art img{opacity:.5;filter:saturate(.75) brightness(1.1)}
.fx-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 78%,transparent) 0%,color-mix(in srgb,var(--bg) 40%,transparent) 45%,color-mix(in srgb,var(--bg) 8%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent) 0%,transparent 25%,transparent 62%,var(--bg) 100%)}