/* 2026-11-12 Homepage featured block: The Automated Content System.
   In neither Notes nor Free. Brandbook v1.1: Onyx sheet, folded fine Ivory dot field (the hero fold canvas),
   one Amber focal point (the button), one Instrument Serif Italic Amber word.
   Motion always runs (Viktor's rule): no prefers-reduced-motion branch. */
@property --feat-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.feat { position: relative; padding: 24px 0 112px; border-bottom: 1px solid var(--line); }
.feat-card {
  --fold: 72px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: 560px;
  border: 1px solid transparent;
  background:
    radial-gradient(60% 70% at 88% 12%, rgba(255, 183, 3, .14), transparent 70%) padding-box,
    radial-gradient(40% 50% at 0% 100%, rgba(251, 86, 7, .06), transparent 70%) padding-box,
    linear-gradient(#060606, #060606) padding-box,
    conic-gradient(from var(--feat-a), rgba(255, 183, 3, 0) 0deg, rgba(255, 183, 3, 0) 250deg, rgba(255, 183, 3, .95) 320deg, rgba(251, 86, 7, .6) 340deg, rgba(255, 183, 3, 0) 360deg) border-box,
    linear-gradient(var(--line-strong), var(--line-strong)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
  animation: feat-spin 9s linear infinite;
}
@keyframes feat-spin { to { --feat-a: 360deg; } }
.feat-card::after {                       /* the folded corner, as on the Free cards, larger */
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 3;
  width: var(--fold);
  height: var(--fold);
  background: linear-gradient(225deg, transparent 50%, #2a2a2a 50%, #131313 72%);
  box-shadow: -1px 1px 0 rgba(242, 242, 242, .1);
}
.feat-fold {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -60px;
  width: 640px;
  height: 640px;
  transform: translateY(-50%);
  pointer-events: none;
}
.feat-fold canvas[data-hero-fold] { display: block; width: 100%; height: 100%; }
.feat-body {
  position: relative;
  z-index: 2;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 56px 0 56px 56px;
}
.feat-kick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.feat-kick i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber); display: block;
  box-shadow: 0 0 0 0 rgba(255, 183, 3, .6);
  animation: feat-ping 2.4s var(--soft) infinite;
}
@keyframes feat-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 183, 3, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 183, 3, 0); } }
.feat-sep { color: var(--line-strong); }
.feat-h {
  margin: 22px 0 0;
  font-family: "Unbounded", var(--sans);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 12ch;
}
.feat-h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber); font-size: 1.12em; letter-spacing: -0.01em; }
.feat-lede { margin: 24px 0 0; max-width: 34rem; color: var(--muted); font-size: 18px; line-height: 1.6; }

/* 5-step flow: a line with a light that travels along it; each step lights up as it passes */
.feat-flow {
  --dur: 6s;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 36px 0 0;
  padding: 22px 0 0;
  list-style: none;
  max-width: 600px;
}
.feat-flow::before {                      /* the track */
  content: ""; position: absolute; top: 4px; left: 4px; right: 4px; height: 1px; background: var(--line-strong);
}
.feat-flow::after {                       /* the travelling light */
  content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 9px;
  background: radial-gradient(closest-side, rgba(255, 183, 3, .95), rgba(255, 183, 3, 0));
  animation: feat-run var(--dur) linear infinite;
}
@keyframes feat-run { 0% { left: -32px; opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 32px); opacity: 0; } }
.feat-flow li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feat-flow li::before {
  content: ""; position: absolute; top: -22px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--onyx); border: 1px solid rgba(242, 242, 242, .45);
  animation: feat-step var(--dur) linear infinite;
  animation-delay: calc(var(--n) * var(--dur) / 5);
}
@keyframes feat-step {
  0%, 20%, 100% { background: var(--onyx); border-color: rgba(242, 242, 242, .45); transform: scale(1); }
  2%, 12% { background: var(--amber); border-color: var(--amber); transform: scale(1.35); }
}
.feat-flow .mono { font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.feat-flow b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ivory); }

.feat-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.feat-facts li { padding: 7px 10px; border: 1px solid var(--line-strong); background: rgba(2, 2, 2, .55); }
.feat-facts b { color: var(--ivory); font-weight: 400; }
.feat-cta { margin: 32px 0 0; }
.feat-card:hover .arr { transform: translateX(5px); }

@media (max-width: 1100px) {
  .feat-card { grid-template-columns: minmax(0, 1fr); }
  .feat-fold { right: -180px; opacity: .7; }
  .feat-body { padding: 48px 40px; }
}
@media (max-width: 900px) {
  .feat { padding: 8px 0 72px; }
  .feat-card { --fold: 44px; min-height: 0; }
  .feat-fold { top: -40px; right: 50%; width: 520px; height: 520px; transform: translateX(50%); opacity: .55; }
  .feat-body { padding: 40px 22px 32px; }
  .feat-lede { font-size: 17px; }
  .feat-kick { font-size: 11px; letter-spacing: .06em; gap: 8px; white-space: nowrap; }
  .feat-flow { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 0 0 26px; max-width: none; }
  .feat-flow::before { top: 4px; bottom: 4px; left: 4px; right: auto; width: 1px; height: auto; }
  .feat-flow::after { left: 0; width: 9px; height: 56px; background: radial-gradient(closest-side, rgba(255, 183, 3, .95), rgba(255, 183, 3, 0)); animation-name: feat-run-y; }
  .feat-flow li { flex-direction: row; align-items: baseline; gap: 12px; }
  .feat-flow li::before { top: 4px; left: -26px; }
  .feat-flow b { font-size: 15px; }
}
@keyframes feat-run-y { 0% { top: -24px; opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 32px); opacity: 0; } }