/* L2 Pro activity: dark background, Seeed green accents, interactive mesh. */
.l2-page { position: relative; background: radial-gradient(ellipse at 8% 30%, #16261665, transparent 35%), radial-gradient(ellipse at 96% 65%, #12302d50, transparent 35%), #050a0b; color: #e8efec; }
.l2-page main, .l2-footer { position: relative; z-index: 1; }
.l2-page .shell { width: min(1320px, calc(100% - 96px)); }
#mesh-background { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.l2-page .accent { color: #a6e04a; }
.l2-page .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #8fc31f33; }
.l2-page .button.ghost { background: #0b1214; border-color: #8fc31f99; color: white; }
.l2-page .button.ghost:hover:not(:disabled) { border-color: var(--green); background: #111c1f; }
.l2-page .button.primary { background: #a6e04a; color: #061003; }
.l2-page .button.primary:hover:not(:disabled) { background: #b8ec63; }
.purchase-note { margin-top: 10px; font-size: 13px; color: #8a9a96; }

/* Header */
.l2-header { position: sticky; top: 0; z-index: 20; background: #050a0bd9; backdrop-filter: blur(10px); border-bottom: 1px solid #ffffff14; }
.l2-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.l2-page .brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.l2-page .brand img { width: 130px; height: auto; }
.l2-page .brand .sensecap-logo { width: 120px; height: auto; filter: brightness(0) invert(1); }
.l2-page .brand-divider { width: 1px; height: 22px; background: #ffffff33; }
#l2-nav { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 600; }
#l2-nav a { color: #c3cfcb; }
#l2-nav a:hover { color: #a6e04a; }
#l2-nav .button { min-height: 40px; padding: 0 18px; font-size: 14px; }
.l2-page .menu-toggle { display: none; border: 1px solid #ffffff33; background: none; border-radius: 999px; padding: 8px 14px; font-weight: 600; color: white; }

/* Hero */
.l2-hero { position: relative; overflow: clip; min-height: min(760px, calc(100svh - 68px)); display: flex; align-items: center; isolation: isolate; }
.hero-wall { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.wall-grid { --wall-size: 200px; --wall-gap: 28px; position: absolute; right: -40px; top: -40px; width: calc(var(--wall-size) * 6 + var(--wall-gap) * 5); transform: rotate(14deg); transform-origin: 50% 0; }
.wall-track { display: flex; flex-direction: column; width: 100%; }
.wall-track.is-loop-ready { transform: translateY(calc(-100% / 3)); animation: wall-scroll 30s linear infinite; }
.wall-group { display: grid; flex-shrink: 0; grid-template-columns: repeat(6, var(--wall-size)); gap: var(--wall-gap); padding-bottom: var(--wall-gap); }
.wall-group img { display: block; width: 100%; height: auto; opacity: .8; filter: drop-shadow(0 12px 16px #000b); }
.l2-hero.motion-idle .wall-track { animation-play-state: paused; }
@keyframes wall-scroll { from { transform: translateY(calc(-100% / 3)); } to { transform: translateY(calc(-200% / 3)); } }
.l2-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #050a0b96 0%, #050a0bc9 35%, #050a0b5c 61%, #050a0b18 100%), linear-gradient(0deg, #050a0b 0%, transparent 25%, transparent 88%, #050a0b33 100%); pointer-events: none; }
.hero-content { position: relative; padding-block: 96px; }
.hero-copy { max-width: 730px; }
.hero-copy .hero-text { max-width: 560px; }
.l2-hero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.06; letter-spacing: -1.6px; color: white; }
.hero-text { margin-top: 26px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: #b8c4c0; }
.hero-refrain { margin-top: 18px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; color: white; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.hero-actions .button { min-height: 54px; padding: 0 32px; font-size: 17px; }

/* Sections */
.l2-section { padding-block: 88px 8px; }
.l2-head { margin-bottom: 36px; }
.l2-head h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -1px; color: white; }
.l2-head p { margin-top: 10px; font-size: 17px; color: #9fb0ab; }
.reward-kind { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #a6e04a; }

/* Rewards */
.reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.reward-card { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 20px; background: linear-gradient(145deg, #1c2b1bd9, #0a1411ed); border: 1px solid #a6e04a2c; transition: border-color .25s, transform .25s; }
.reward-card:nth-child(2) { background: linear-gradient(145deg, #183333d9, #0a1518ed); border-color: #75c8bd2c; }
.reward-card:hover { border-color: #8fc31f80; transform: translateY(-3px); }
.reward-card h3 { font-size: 20px; line-height: 1.35; color: white; }
.reward-card p:not(.reward-kind):not(.reward-req) { color: #b3c1bd; line-height: 1.6; }
.reward-req { font-size: 14px; font-weight: 600; color: #d6e6c0; }
.reward-req span { color: #a6e04a; }
.reward-card .button { align-self: flex-start; margin-top: auto; }
.share-action { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.share-action .button { flex-shrink: 0; align-self: center; margin: 0; }
.reward-card p.share-reminder, .optional-step p.share-reminder { font-size: 12px; line-height: 1.6; color: #a9beb6; }
.reward-visual { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 150px; padding: 22px 26px; border-radius: 14px; }
.coupon { position: relative; background: linear-gradient(120deg, #a6e04a, #8fc31f); color: #061003; }
.coupon::after { content: ""; position: absolute; right: 90px; top: 12px; bottom: 12px; border-right: 2px dashed #06100340; }
.coupon span { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.coupon strong { font-size: 52px; line-height: 1; letter-spacing: -1.5px; }
.coupon em { font-style: normal; font-size: 14px; font-weight: 600; }
.merch { align-items: flex-start; background: radial-gradient(circle at 85% 30%, #8fc31f40, transparent 60%), #13262a; color: #a6e04a; border: 1px solid #8fc31f40; }
.merch strong { font-size: 28px; color: white; }
.milestones { margin-top: 24px; padding: 28px 32px; border-radius: 20px; border: 1px solid #ffffff17; background: #0b1416d9; }
.milestones h3 { font-size: 20px; margin-bottom: 14px; color: white; }
.milestones table { width: 100%; border-collapse: collapse; font-size: 15px; }
.milestones th, .milestones td { padding: 14px 8px; text-align: left; border-top: 1px solid #ffffff14; }
.milestones thead th { border-top: 0; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: #8a9a96; }
.milestones tbody th { width: 30%; color: white; }
.milestones td { color: #c9d6d2; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.steps li { position: relative; }
.steps li:not(:last-child)::after { content: "→"; position: absolute; right: -38px; top: 22%; font-size: 26px; color: #a6e04a; }
.steps img { width: 100%; height: auto; border-radius: 16px; border: 1px solid #ffffff17; }
.step-num { display: inline-block; margin: 18px 0 6px; font-size: 14px; font-weight: 800; color: #a6e04a; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 20px; color: white; margin-bottom: 8px; }
.steps p { color: #b3c1bd; line-height: 1.6; }
.step-submit { margin-top: 18px; }
.optional-step { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 40px; padding: 28px 32px; border-radius: 20px; border: 1px dashed #8fc31f80; background: linear-gradient(120deg, #15271bc9, #0b1e1bd9); }
.optional-step > div:first-child { flex: 1; }
.optional-step .share-action { flex: 0 1 355px; flex-wrap: wrap; margin: 0; gap: 12px; }
.optional-step h3 { margin: 8px 0; font-size: 20px; color: white; }
.optional-step p:not(.reward-kind) { color: #b3c1bd; line-height: 1.6; max-width: 720px; }

/* Ideas */
.ideas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.idea-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; border: 1px solid #ffffff17; background: #0b1416d9; color: #a6e04a; transition: border-color .25s, transform .25s, background .25s; }
.idea-card:hover { border-color: #8fc31f80; transform: translateY(-3px); background: #0f1c1f; }
.idea-card h3 { font-size: 17px; color: white; }
.idea-card p { font-size: 14px; line-height: 1.6; color: #a9b8b4; }
.idea-link { justify-content: space-between; background: linear-gradient(150deg, #8fc31f26, #0b1416); border-color: #8fc31f66; }
.idea-link span { font-weight: 700; }
.idea-example { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 8px; color: #a9b8b4; font: inherit; font-size: 13px; text-align: left; background: none; border: 0; cursor: pointer; }
.idea-example img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 10px; background: #13222a; }
.idea-example span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea-example:hover span, .idea-example:focus-visible span { color: #a6e04a; }
.idea-empty { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 16px; border: 1px dashed #8fc31f66; border-radius: 10px; color: #a6e04a; text-align: center; white-space: normal !important; }
.community-demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.community-demos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #13222a; }
.ideas-note { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: 16px; font-weight: 600; color: #d6e6c0; }

/* Start + FAQ */
.start-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.start-actions .button { min-height: 52px; padding: 0 28px; }
.faq-list { border-top: 1px solid #ffffff17; }
.faq-list details { border-bottom: 1px solid #ffffff17; }
.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 17px; font-weight: 700; color: white; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: #a6e04a; font-size: 22px; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list p { padding: 0 0 22px; max-width: 820px; color: #b3c1bd; line-height: 1.7; }
.faq-form-link { display: inline; padding: 0; border: 0; background: none; color: #a6e04a; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.l2-footer { margin-top: 96px; border-top: 1px solid #ffffff14; }
.l2-footer .footer-inner { display: flex; justify-content: space-between; align-items: center; padding-block: 24px; font-size: 14px; color: #a6e04a; }

/* Dialogs on the dark page keep the light form. */
.submission-dialog-heading { padding: 28px 32px 0; }
.submission-dialog-heading h2 { font-size: 26px; color: var(--blue); }
.submission-dialog-heading p { margin-top: 6px; color: var(--muted); }
.submission-dialog .project-form { border: 0; }
.milestone-hint { margin: -10px 0 20px; font-size: 13px; color: var(--green-dark); font-weight: 600; }

@media (max-width: 1080px) {
  .l2-page .shell { width: calc(100% - 64px); }
  .l2-page .brand { gap: 10px; }
  .l2-page .brand img { width: 112px; }
  .l2-page .brand .sensecap-logo { width: 102px; }
  #l2-nav { gap: 16px; font-size: 13px; }
  .share-action { flex-wrap: wrap; gap: 10px; }
  .ideas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .l2-page .menu-toggle { display: inline-flex; gap: 6px; }
  #l2-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 16px 18px; background: #050a0b; border-bottom: 1px solid #ffffff17; }
  #l2-nav.is-open { display: flex; }
  #l2-nav a { padding: 12px 4px; }
  .reward-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -34px; }
  .optional-step { flex-direction: column; align-items: flex-start; }
  .optional-step .share-action { flex-basis: auto; }
  .ideas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .l2-page .shell { width: calc(100% - 40px); }
  .l2-page .brand img { width: 108px; }
  .l2-page .brand .sensecap-logo { width: 96px; }
  .l2-hero { min-height: 0; align-items: flex-start; padding-bottom: 310px; }
  .l2-hero::before { background: linear-gradient(180deg, #050a0be6 0%, #050a0bbd 40%, #050a0b33 66%, #050a0b 100%); }
  .wall-grid { --wall-size: 145px; --wall-gap: 22px; right: -60px; top: 220px; width: calc(var(--wall-size) * 3 + var(--wall-gap) * 2); }
  .wall-group { grid-template-columns: repeat(3, var(--wall-size)); }
  .wall-track.is-loop-ready { animation-duration: 42s; }
  .hero-content { padding-block: 44px 0; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-actions .button { padding: 0 10px; font-size: 15px; min-height: 52px; white-space: normal; text-align: center; }
  .l2-section { padding-top: 64px; }
  .reward-card, .milestones, .optional-step { padding: 22px; }
  .milestones tbody th { width: 34%; }
  .ideas-grid { grid-template-columns: minmax(0, 1fr); }
  .start-actions .button { width: 100%; }
  .submission-dialog-heading { padding: 22px 20px 0; }
}

.l2-motion { position: absolute; right: 24px; bottom: 18px; z-index: 3; padding: 8px 12px; border: 1px solid #c4daac55; border-radius: 99px; background: #07110c99; color: #bbceab; font-size: 11px; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }