/* v7: bolder. Three ways in, the assistant chat, two memberships, the seven locks, agent-ready, roadmap */
.hero h1 { font-size: clamp(48px, 7.4vw, 104px); }
.hero-ask { display: inline-block; margin: 0 0 26px; font: 400 clamp(20px, 2.2vw, 26px)/1.1 var(--display); text-transform: uppercase; color: var(--amber); border-bottom: 3px solid var(--amber); padding-bottom: 6px; }

/* Three ways in */
.ways { background: var(--white); }
.ways-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
ol.doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 3px solid var(--black); }
ol.doors li { padding: 24px 20px; border-left: 3px solid var(--black); }
ol.doors li:first-child { border-left: 0; }
ol.doors li.hub { grid-column: 1 / -1; border-left: 0; border-top: 3px solid var(--black); background: var(--black); color: var(--white); display: grid; grid-template-columns: auto auto 1fr; gap: 0 18px; align-items: center; }
ol.doors li.hub h3 { color: var(--blue); margin: 0; }
ol.doors li.hub p { color: var(--muted-dark); margin: 0; }
.door-no { display: block; font: 400 44px/1 var(--display); color: var(--blue); margin-bottom: 12px; }
.hub .door-no { margin: 0; }
ol.doors h3 { font: 400 26px/1.05 var(--display); text-transform: uppercase; margin: 0 0 10px; }
ol.doors p { margin: 0; font-size: 15px; color: var(--muted); }

.chat { background: #101418; color: #fff; border: 3px solid var(--black); border-radius: 22px; padding: 18px; box-shadow: 10px 10px 0 var(--blue); }
.chat-top { display: flex; align-items: center; gap: 8px; font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 14px; }
.chat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
.msg { margin: 0 0 10px; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; max-width: 88%; }
.msg.me { margin-left: auto; background: var(--blue); color: var(--black); border-bottom-right-radius: 4px; font-weight: 600; }
.msg.ai { background: #232a31; border-bottom-left-radius: 4px; }
.approve { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff6ea; color: var(--black); border-radius: 14px; padding: 12px 14px; margin: 4px 0 12px; }
.approve small { display: block; font: 800 9.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #6b5d4b; }
.approve strong { font: 400 22px/1.05 var(--display); text-transform: uppercase; }
.approve-btn { background: var(--black); color: var(--amber); font: 800 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 11px 14px; border-radius: 999px; }
.chat-foot { margin: 6px 0 0; font-size: 12px; color: var(--muted-dark); text-align: center; }

/* Membership: two tiers + support */
.tiers-2 { grid-template-columns: 1fr 1.15fr; max-width: 1000px; align-items: start; }
.tiers-2 .price { font: 400 clamp(56px, 6vw, 80px)/1 var(--display); border: 0; padding: 0; margin: 4px 0 6px; letter-spacing: 0; }
.tiers-2 .price span { display: inline; font: 700 16px/1 var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.warm .tiers-2 .tier.featured .price { color: var(--amber); }
.warm .tiers-2 .tier.featured .price span { color: var(--muted-dark); }
.support { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1000px; margin-top: 34px; border: 3px solid var(--amber); padding: 20px 24px; }
.support b { display: block; font: 400 26px/1.05 var(--display); text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.support span { color: #e9dcc8; font-size: 15.5px; }
.support-amts { display: flex; gap: 10px; flex: none; }
.support-amts span { font: 400 28px/1 var(--display); color: var(--black); background: var(--amber); padding: 12px 16px; }

/* Seven locks */
ol.locks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 3px solid var(--black); background: var(--white); }
ol.locks li { padding: 24px 20px; border-right: 3px solid var(--black); border-bottom: 3px solid var(--black); }
ol.locks li:nth-child(4n) { border-right: 0; }
ol.locks li:nth-child(n+5) { border-bottom: 0; }
ol.locks li span { display: block; font: 400 40px/1 var(--display); color: var(--blue); margin-bottom: 10px; }
ol.locks h3 { font: 400 24px/1.05 var(--display); text-transform: uppercase; margin: 0 0 8px; }
ol.locks p { margin: 0; font-size: 14.5px; color: var(--muted); }
ol.locks li.lock-exit { background: var(--black); color: var(--white); border-right: 0; grid-column: span 2; }
ol.locks li.lock-exit p { color: var(--muted-dark); }

/* Agent-ready */
#assistants ul.plain b { color: var(--white); }
#assistants .small a { color: var(--blue); }
p.small.on-dark { color: var(--muted-dark); font-size: 14px; }
ol.agent-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 3px solid var(--blue); }
ol.agent-rules li { padding: 26px 22px; border: 1px solid rgba(0,166,230,.4); }
ol.agent-rules b { display: block; font: 400 clamp(32px, 3.6vw, 46px)/1 var(--display); text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
ol.agent-rules span { color: var(--muted-dark); font-size: 15px; }

/* Club Filmmakers on warm */
.warm ol.process { border-color: var(--amber); }
.warm .process li { border-left-color: var(--amber); }
.warm .process b { color: var(--amber); }
.warm .process p { color: #e9dcc8; }

/* Roadmap */
ol.roadmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 3px solid var(--black); background: var(--white); }
ol.roadmap li { padding: 26px 22px; border-left: 3px solid var(--black); }
ol.roadmap li:first-child { border-left: 0; }
ol.roadmap li.now { background: var(--black); color: var(--white); }
ol.roadmap small { display: inline-block; font: 800 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; background: var(--blue); color: var(--black); padding: 6px 9px; margin-bottom: 14px; }
ol.roadmap h3 { font: 400 30px/1.05 var(--display); text-transform: uppercase; margin: 0 0 8px; }
ol.roadmap p { margin: 0; font-size: 15px; color: var(--muted); }
ol.roadmap li.now p { color: var(--muted-dark); }

@media (max-width: 960px) {
  .ways-grid { grid-template-columns: 1fr; }
  .tiers-2 { grid-template-columns: 1fr; max-width: 560px; }
  ol.locks { grid-template-columns: 1fr 1fr; }
  ol.locks li, ol.locks li:nth-child(4n), ol.locks li:nth-child(n+5) { border-right: 3px solid var(--black); border-bottom: 3px solid var(--black); }
  ol.locks li:nth-child(2n) { border-right: 0; }
  ol.locks li:nth-child(7) { border-bottom: 0; grid-column: 1 / -1; }
  ol.roadmap { grid-template-columns: 1fr; }
  ol.roadmap li { border-left: 0; border-top: 3px solid var(--black); }
  ol.roadmap li:first-child { border-top: 0; }
}
@media (max-width: 560px) {
  ol.doors { grid-template-columns: 1fr; }
  ol.doors li { border-left: 0; border-top: 3px solid var(--black); }
  ol.doors li:first-child { border-top: 0; }
  ol.doors li.hub { grid-template-columns: auto 1fr; }
  ol.doors li.hub p { grid-column: 1 / -1; margin-top: 8px; }
  .chat { box-shadow: 6px 6px 0 var(--blue); margin-right: 6px; }
  .support { flex-direction: column; align-items: flex-start; }
  ol.locks { grid-template-columns: 1fr; }
  ol.locks li, ol.locks li:nth-child(n) { border-right: 0; border-bottom: 3px solid var(--black); grid-column: auto; }
  ol.locks li:last-child { border-bottom: 0; }
  ol.agent-rules { grid-template-columns: 1fr; }
}