/* =====================================================================
   SHELL: shared by the landing page and every internal page.
   Mobile menu, the page-to-page pixel dissolve, and the plan columns.
   ===================================================================== */

/* page dissolve: a Graphite veil masked by an 8x8 Bayer threshold */
html.px-arrive::after{content:"";position:fixed;inset:0;background:#121211;z-index:9999}
.px-veil{position:fixed;inset:0;z-index:9998;background:#121211;visibility:hidden;pointer-events:none;-webkit-mask-repeat:repeat;mask-repeat:repeat;image-rendering:pixelated}

/* ---------- mobile menu ---------- */
.menu-btn{display:none;align-items:center;gap:10px;height:36px;padding:0 14px;border:0;background:none;color:inherit;box-shadow:inset 0 0 0 1px currentColor;border-radius:2px;font-size:15px;cursor:pointer}
.menu-btn i{display:grid;gap:4px}
.menu-btn i b{display:block;width:14px;height:1.5px;background:currentColor}
.menu{position:fixed;inset:0;z-index:80;background:#121211;color:#D9D5C1;display:flex;flex-direction:column;padding:96px clamp(20px,6vw,96px) 40px;overflow-y:auto;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;border-top:1px solid rgba(242,236,196,.12)}
.menu nav a{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid rgba(242,236,196,.12);font-family:"Host Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:28px;letter-spacing:-.03em;color:#F2ECC4;text-decoration:none}
.menu nav a i{width:12px;height:12px;background:#8F8C80;flex:none}
.menu nav a i.ci{border-radius:50%}
.menu nav a i.tr{clip-path:polygon(50% 0,100% 100%,0 100%)}
.menu .menu-foot{margin-top:auto;padding-top:36px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.menu .menu-foot a.plain{color:#D9D5C1;font-size:17px}
.menu-close{position:absolute;right:clamp(20px,6vw,96px);top:18px;height:36px;padding:0 14px;border:0;background:none;color:#F2ECC4;box-shadow:inset 0 0 0 1px currentColor;border-radius:2px;font-size:15px;cursor:pointer}
.bar .signin{white-space:nowrap}
@media (max-width:560px){.bar .signin{display:none!important}}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .bar nav{gap:12px}
}

/* =====================================================================
   PLANS
   Four columns in one band. Squares count the simulations each plan
   gives you (a square is a page, so a square is a simulation).
   The target bracket from the crowd section marks the recommended plan.
   ===================================================================== */
.plans{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(26,26,24,.18);border-bottom:1px solid rgba(26,26,24,.18)}
.plan{position:relative;display:flex;flex-direction:column;padding:40px 30px 34px;color:#1A1A18}
.plan+.plan{box-shadow:inset 1px 0 0 rgba(26,26,24,.10)}
.plan.pick{background:rgba(26,26,24,.04)}
.plan h3{font-family:"Host Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:24px;letter-spacing:-.026em;line-height:1.1}
.plan .plan-for{font-size:16px;line-height:1.45;color:#5F5E57;margin-top:8px;min-height:2.9em}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;margin-top:26px}
.plan-price b{font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-weight:400;font-size:clamp(32px,3vw,44px);letter-spacing:-.05em;line-height:1}
.plan-price span{font-size:16px;color:#5F5E57}
.plan-sims{display:grid;grid-template-columns:repeat(10,13px);gap:4px;align-content:end;height:64px;margin-top:28px}
.plan-sims i{width:13px;height:13px;background:#1A1A18;display:block}
.plan-eff{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-bottom:20px;border-bottom:1px solid rgba(26,26,24,.10);font-size:15px;color:#5F5E57}
.plan-eff b{font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-weight:400;color:#1A1A18}
.plan-list{list-style:none;margin-top:18px;flex:1}
.plan-list li{position:relative;padding:8px 0 8px 24px;font-size:16px;line-height:1.4;color:#2E2D29}
.plan-list li::before{content:"";position:absolute;left:1px;top:.92em;width:8px;height:8px;background:#1A1A18}
.plan-list li.soon{color:#5F5E57}
.plan-list li.soon::before{background:none;background-image:radial-gradient(circle,#1A1A18 .8px,transparent 1.2px);background-size:3px 3px;width:9px;height:9px;box-shadow:inset 0 0 0 1px rgba(26,26,24,.3)}
.plan .pill{margin-top:28px;align-self:stretch}
.plan:not(.pick) .pill{background:none;color:#1A1A18;box-shadow:inset 0 0 0 1px rgba(26,26,24,.3)}
.plan:not(.pick) .pill:hover{box-shadow:inset 0 0 0 1px #1A1A18}
.plan .brk{position:absolute;inset:10px;pointer-events:none}
.plan .brk i{position:absolute;width:14px;height:14px;border:3px solid #1A1A18}
.plan .brk i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.plan .brk i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.plan .brk i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.plan .brk i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.plan .brk span{position:absolute;left:50%;top:-14px;transform:translateX(-50%);background:#1A1A18;color:#ECEBE5;font-size:13px;font-weight:500;padding:4px 10px;border-radius:4px;white-space:nowrap}
.plans-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-top:28px;font-size:16px;color:#5F5E57}
.plans-foot .free{display:inline-flex;align-items:center;gap:12px}
.plans-foot .free i{width:13px;height:13px;background:#1A1A18;display:inline-block}
.plans-foot a.more{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:23px;box-shadow:inset 0 0 0 1px rgba(26,26,24,.3);color:#1A1A18;text-decoration:none;font-size:15px;font-weight:500}
.plans-foot a.more::after{content:"→";font-weight:400}

/* tools that paid plans unlock: Dome (audiences) and Studio (variants) */
@media (max-width:1100px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan:nth-child(3){box-shadow:inset 0 1px 0 rgba(26,26,24,.10)}
  .plan:nth-child(4){box-shadow:inset 1px 1px 0 rgba(26,26,24,.10)}
}
@media (max-width:640px){
  .plans{grid-template-columns:1fr}
  .plan+.plan,.plan:nth-child(3),.plan:nth-child(4){box-shadow:inset 0 1px 0 rgba(26,26,24,.10)}
  .plan{padding:34px 6px 30px}
  .plan.pick{padding:44px 20px 30px;margin:10px 0}
  .plan .plan-for{min-height:0}
  .plan-sims{height:auto;margin-top:22px}
}
@media (prefers-reduced-motion:reduce){.px-veil,html.px-arrive::after{display:none}}

/* tools in a plan: one-line pills, softly highlighted; the full description is on hover */
.plan-tools{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:96px}
.plan-tools .pt-l{font-size:14px;color:#5F5E57;margin-bottom:2px}
.pt{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 9px;border-radius:8px;background:rgba(201,146,42,.12);white-space:nowrap;cursor:default}
.pt-i{display:grid;place-items:center;width:16px;height:16px;color:#1A1A18;flex:none}
.pt-i svg{width:16px;height:16px}
.pt-i svg rect[fill="#fff"]{fill:transparent}
.pt>span:last-child{display:inline-flex;align-items:baseline;gap:6px;font-size:15px;line-height:1}
.pt b{font-weight:600;color:#1A1A18}
.pt em{font-style:normal;color:#5F5E57}
.plan-tools.basic .pt-basic{font-size:14px;line-height:1.45;color:#5F5E57;max-width:30ch}
.plan .plan-list{margin-top:10px}
@media (max-width:640px){.plan-tools{min-height:0}}