/* Pro page. Same language as the homepage:
   violet poster hero with live UI breaking out, then alternating frames. */
.hero { position: relative; overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; max-width: var(--page-width); margin: 0 auto; padding: 40px var(--gutter) 0; position: relative; z-index: 2; }
.hero__copy { padding: 60px 0 130px; }
.hero h1 { font-size: clamp(60px, 8.6vw, 140px); margin-top: 22px; }
.hero .lede { margin: 26px 0 34px; }
.hero__stage { position: relative; }
.hero__stage .lock { --u: 1.3px; position: absolute; right: 4%; top: 0; transform: rotate(5deg); z-index: 2; }
.hero__stage .w-aotd { --u: 1.1px; position: absolute; left: -24%; top: 300px; transform: rotate(-8deg); z-index: 3; }
.sec { padding: 130px 0; position: relative; }
.hero + .sec { padding-top: 380px; }
.sec__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 60px; }
.sec h2 { font-size: clamp(44px, 6vw, 92px); }
.sec .lede { justify-self: end; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.split > div { display: grid; }
.feat { background: var(--card); border-radius: 32px; padding: 30px; display: grid; align-content: space-between; gap: 22px; }
.feat h3 { margin: 0; font-size: 28px; letter-spacing: -0.02em; }
.feat p { margin: 8px 0 0; color: var(--text-2); max-width: 38ch; }
.feat .history, .feat .era { --u: 1.1px; background: var(--card-raised); }
.widgets { display: flex; justify-content: center; align-items: center; gap: 26px; --u: 1.12px; padding: 20px 0 40px; }
.widgets .widget:nth-child(1) { transform: rotate(-4deg) translateY(30px); }
.widgets .widget:nth-child(2) { transform: rotate(3deg) translateY(-24px); --u: 1.25px; }
.widgets .widget:nth-child(3) { transform: rotate(-2deg) translateY(40px); }
.trio { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 22px; grid-template-areas: "coll coll prof" "comp comp prof"; }
.trio > :nth-child(1) { grid-area: coll; } .trio > :nth-child(2) { grid-area: prof; } .trio > :nth-child(3) { grid-area: comp; }
.trio .feat { align-content: start; }
.trio__colls { display: flex; gap: 18px; --u: 1.3px; }
.trio .profile { --u: 1px; width: 100%; }
.trio .comp { --u: 1.02px; background: var(--card-raised); }
.plans-sec { text-align: left; }
.plans-sec .plans { max-width: 900px; }
.plans-sec .plan:not(.plan--hl) { background: var(--white); color: var(--black); --text-2: var(--zinc-950); --accent-text: var(--violet-500); }
.plans-sec .plan--hl { background: var(--black); }
.plans-sec .plan--hl li::before { color: var(--violet-300); }
.plans-sec__foot { margin-top: 26px; color: var(--text-2); font-size: 15px; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; padding-top: 16px; }
  .hero__copy { padding: 10px 0 0; }
  .hero h1 { font-size: clamp(54px, 16vw, 86px); }
  .hero__stage { height: 420px; margin-top: 40px; }
  .hero__stage .lock { --u: 0.9px; right: 10px; }
  .hero__stage .w-aotd { --u: 0.86px; left: 4px; top: 590px; }
  .hero + .sec { padding-top: 420px; }
  .sec { padding: 80px 0; }
  .sec__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 30px; }
  .sec .lede { justify-self: start; }
  .split, .trio { grid-template-columns: minmax(0, 1fr); }
  .feat { padding: 22px; border-radius: 28px; }
  .feat .history, .feat .era { --u: 0.92px; }
  .widgets { flex-direction: column; gap: 22px; --u: 0.92px; }
  .widgets .widget:nth-child(1) { align-self: flex-start; }
  .widgets .widget:nth-child(2) { --u: 0.92px; }
  .trio { grid-template-areas: "coll" "prof" "comp"; }
  .trio__colls { --u: 0.6px; gap: 10px; }
}

@media (max-width: 370px) {
  .widgets { --u: 0.76px; }
  .widgets .widget:nth-child(2) { --u: 0.78px; }
  .hero__stage .w-aotd { --u: 0.76px; }
  .trio__colls { --u: 0.5px; }
  .feat .history, .feat .era { --u: 0.8px; }
}