/* Forge Labs · break the site and pour the metal (loads after wow.css) */

/* ---------- break the site: the glass over the page, the strike label and the flash ---------- */
.break-glass { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 58; pointer-events: none; }
.break-label { position: fixed; z-index: 59; transform: translate(-50%, -50%) scale(.9); opacity: 0; pointer-events: none; font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px rgba(0, 0, 0, .9); transition: opacity .25s, transform .4s var(--ease); }
.break-label.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.break-flash { position: fixed; inset: 0; z-index: 57; pointer-events: none; background: #fff; animation: breakFlash .35s ease-out forwards; }
@keyframes breakFlash { from { opacity: .55; } to { opacity: 0; } }

/* ---------- pour the metal ---------- */
.pour__stage { position: relative; margin: clamp(28px, 4vw, 48px) var(--gutter) 0; height: min(78vh, 760px); height: min(78svh, 760px); border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2);
  background: radial-gradient(120% 90% at 50% 0%, #121214, #050505 70%); box-shadow: inset 0 -80px 120px -60px rgba(255, 140, 60, .08); }
.pour__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: crosshair; }
.pour__form { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; padding: 6px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .55); }
.pour__form input { width: min(46vw, 220px); border: 0; outline: none; background: transparent; padding: 0 14px; color: var(--text); font: 500 15px var(--sans); }
.pour__hint { position: absolute; right: 18px; top: 14px; margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); pointer-events: none; }
.pour__stage.is-static .pour__canvas, .pour__stage.is-static .pour__hint, .pour__stage.is-static .pour__form { display: none; }
@media (max-width: 767px) { .pour__stage { height: 64vh; height: 64svh; margin: 24px 12px 0; } .pour__hint { display: none; } }

/* ---------- local-business layout: the phone demo and pricing ---------- */
.pricing__grid { display: grid; gap: 22px; margin-top: 56px; align-items: start; }
@media (min-width: 900px) { .pricing__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.plan { position: relative; display: grid; gap: 14px; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius); border: 1px solid rgba(220, 222, 226, .3); background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(200, 204, 210, .1), transparent 60%), rgba(10, 10, 11, .9); box-shadow: 0 40px 90px -50px rgba(190, 194, 201, .5); }
.plan__price { margin: 0; font: 600 clamp(3.4rem, 7vw, 5.4rem)/.95 var(--sans); letter-spacing: -.045em; background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan__note { margin: 0; color: var(--muted); font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.plan__list { list-style: none; margin: 8px 0 10px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.plan__list li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.plan__list svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
.addons { display: grid; gap: 14px; }
.addon { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(10, 10, 11, .85); transition: border-color .4s; }
.addon:hover { border-color: rgba(220, 222, 226, .3); }
.addon h3 { margin: 0 0 4px; font: 600 1.1rem/1.2 var(--sans); letter-spacing: -.015em; }
.addon p { margin: 0; color: var(--muted); font-size: 14.5px; }
.addon b { flex: none; font: 600 1.25rem/1 var(--sans); letter-spacing: -.02em; }

/* "Try it": a phone running a sample site, switched by tabs */
.demo { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; margin-top: 120px; }
@media (min-width: 900px) { .demo { grid-template-columns: minmax(0, 1fr) auto; } }
.demo__intro .h2 { max-width: 14ch; }
.demo__tabs { display: inline-flex; gap: 4px; margin: 30px 0 22px; padding: 5px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.demo__tab { padding: 11px 20px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 14.5px var(--sans); cursor: pointer; transition: color .25s, background .25s, box-shadow .25s; }
.demo__tab:hover { color: var(--text); }
.demo__tab[aria-selected="true"] { background: var(--heat); color: #0A0A0B; box-shadow: 0 8px 26px -10px rgba(220, 222, 226, .7); }
.demo__goal { margin: 0 0 28px; font-size: 1.15rem; max-width: 34ch; }
.demo__goal span { display: block; margin-bottom: 6px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.demo__note { margin: 22px 0 0; font-size: 13.5px; color: var(--steel); max-width: 52ch; }
.demo__note a { color: var(--muted); }

.phone { --rx: 0deg; --ry: 0deg; position: relative; justify-self: center; perspective: 1200px; padding: 10px; }
.phone::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -26px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 205, 215, .28), transparent); filter: blur(8px); pointer-events: none; }
.phone__frame { position: relative; width: 300px; height: 612px; padding: 12px; border-radius: 52px; background: linear-gradient(145deg, #3a3c40, #121314 40%, #2a2b2e 70%, #0b0b0c); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18), 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 80px -20px rgba(190, 196, 210, .25); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease); animation: phoneFloat 6s ease-in-out infinite; }
@keyframes phoneFloat { 50% { translate: 0 -10px; } }
.phone__notch { position: absolute; top: 22px; left: 50%; z-index: 3; width: 96px; height: 26px; margin-left: -48px; border-radius: 999px; background: #050505; }
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 41px; background: #f6f4ef; }

/* the sample site on the screen */
.ms { height: 100%; display: flex; flex-direction: column; color: #16181c; font-family: var(--sans); }
.ms__bar { display: flex; align-items: center; justify-content: space-between; padding: 52px 20px 12px; font-size: 15px; letter-spacing: -.01em; }
.ms__bar i { width: 18px; height: 10px; border-block: 2px solid #16181c; }
.ms__hero { margin: 0 14px; padding: 22px 18px; border-radius: 20px; color: #fff; }
.ms__hero p { margin: 0 0 6px; font: 700 21px/1.1 var(--sans); letter-spacing: -.02em; }
.ms__hero span { font-size: 11.5px; opacity: .85; }
.ms--plumber .ms__hero { background: linear-gradient(135deg, #1d4f91, #2d7dd2); }
.ms--kitchen .ms__hero { background: linear-gradient(135deg, #8f2a1c, #d4622b); }
.ms--salon .ms__hero { background: linear-gradient(135deg, #5b2a5e, #b5577f); }
.ms__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 20px; overflow: hidden; }
.ms__h { margin: 4px 2px 0; font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #6a6e76; }
.ms__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms__chip, .ms__seg button, .ms__people button, .ms__slots button { border: 1px solid #dcd8cf; background: #fff; color: #16181c; font: 600 12.5px var(--sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.ms__chip { padding: 8px 11px; border-radius: 999px; }
.ms__chip.is-on, .ms__seg .is-on, .ms__slots .is-on { background: #16181c; color: #fff; border-color: #16181c; }
.ms__chip:active, .ms__slots button:active, .ms__people button:active { transform: scale(.96); }
.ms__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ms__seg button { padding: 8px 2px; border-radius: 10px; }
.ms__price { margin: 6px 2px 0; font: 800 34px/1 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ms__cta { margin-top: auto; padding: 14px; border: 0; border-radius: 14px; background: #16181c; color: #fff; font: 700 14.5px var(--sans); cursor: pointer; transition: opacity .2s, transform .15s; }
.ms--plumber .ms__cta { background: #1d4f91; } .ms--kitchen .ms__cta { background: #b2431f; } .ms--salon .ms__cta { background: #7a3a6e; }
.ms__cta:disabled { opacity: .45; cursor: default; }
.ms__cta:not(:disabled):active { transform: scale(.98); }
.ms__done { margin: 0; padding: 10px 12px; border-radius: 12px; background: #e3f5e9; color: #1f6b3a; font: 600 12.5px/1.35 var(--sans); animation: msPop .4s var(--ease); }
@keyframes msPop { from { opacity: 0; transform: translateY(6px); } }
.ms__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ms__menu li { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 14px; background: #fff; border: 1px solid #ebe7de; }
.ms__menu span { flex: 1; font: 600 13px/1.25 var(--sans); }
.ms__menu em { display: block; font-style: normal; font-weight: 500; color: #6a6e76; }
.ms__menu b { min-width: 14px; text-align: center; font-size: 13px; color: #6a6e76; }
.ms__menu button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #b2431f; color: #fff; font: 700 17px/1 var(--sans); cursor: pointer; transition: transform .15s; }
.ms__menu button:active { transform: scale(.9); }
.ms__people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ms__people button { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; }
.ms__people i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #e8cfd9, #c58aa5); color: #4a1f45; font: 700 15px var(--sans); font-style: normal; }
.ms__people .is-on { border-color: #7a3a6e; box-shadow: 0 0 0 2px #7a3a6e inset; }
.ms__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ms__slots button { padding: 9px 2px; border-radius: 10px; }
.ms__slots .is-on { background: #7a3a6e; border-color: #7a3a6e; }
/* every switch slides the new site in, piece by piece */
.phone__screen.is-in .ms__bar, .phone__screen.is-in .ms__hero, .phone__screen.is-in .ms__body > * { animation: msIn .55s var(--ease) both; }
.phone__screen.is-in .ms__hero { animation-delay: .06s; }
.phone__screen.is-in .ms__body > *:nth-child(2) { animation-delay: .12s; } .phone__screen.is-in .ms__body > *:nth-child(3) { animation-delay: .16s; } .phone__screen.is-in .ms__body > *:nth-child(4) { animation-delay: .2s; } .phone__screen.is-in .ms__body > *:nth-child(n+5) { animation-delay: .24s; }
@keyframes msIn { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 420px) { .phone__frame { width: 280px; height: 580px; } .demo__tab { padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .phone__frame { animation: none; } .phone__screen.is-in * { animation: none !important; } }