{"id":257,"date":"2020-05-14T00:37:12","date_gmt":"2020-05-14T00:37:12","guid":{"rendered":"https:\/\/turnstylehost.com\/wordpress\/?page_id=257"},"modified":"2026-06-13T09:28:51","modified_gmt":"2026-06-12T23:28:51","slug":"homepage","status":"publish","type":"page","link":"https:\/\/turnstylehost.com\/campaign\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Turnstyle \u2014 Compliant Sales Promotions, Built Fast<\/title>\n <meta name=\"description\" content=\"Free promotion guides, permit checker and campaign tools. Turnstyle builds compliant sales promotions in days, not weeks.\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300&display=swap\" rel=\"stylesheet\" \/>\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --ink-950: #09090B;\n --ink-900: #0D0D10;\n --ink-800: #141418;\n --ink-700: #1C1C22;\n --ink-600: #26262E;\n --ink-500: #32323C;\n --ink-300: #5A5A6E;\n --white: #FFFFFF;\n --off-white: #F5F4F2;\n --text-primary: #FFFFFF;\n --text-secondary: rgba(255,255,255,0.52);\n --text-muted: rgba(255,255,255,0.28);\n --border: rgba(255,255,255,0.07);\n --border-hover: rgba(255,255,255,0.15);\n --accent: #D4A853;\n --font: 'Nunito', -apple-system, sans-serif;\n --ease: cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n html { background: var(--ink-950); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }\n body { font-family: var(--font); background: var(--ink-950); color: var(--text-primary); overflow-x: hidden; }\n a { text-decoration: none; color: inherit; }\n ::selection { background: var(--accent); color: #000; }\n ::-webkit-scrollbar { width: 2px; }\n ::-webkit-scrollbar-thumb { background: var(--ink-500); }\n\n .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 2rem; }\n @media (max-width: 640px) { .container { padding: 0 1.25rem; } }\n\n \/* NAV *\/\n nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n padding: 1.5rem 0;\n transition: background 300ms, border-color 300ms, padding 300ms;\n border-bottom: 1px solid transparent;\n }\n nav.scrolled {\n background: rgba(9,9,11,0.94);\n backdrop-filter: blur(24px);\n border-color: var(--border);\n padding: 1rem 0;\n }\n .nav-inner { display: flex; align-items: center; justify-content: space-between; }\n .nav-logo img { height: 20px; width: auto; }\n .nav-links { display: flex; gap: 2rem; list-style: none; }\n .nav-links a { font-size: 0.875rem; font-weight: 400; color: var(--text-secondary); transition: color 180ms; }\n .nav-links a:hover { color: var(--white); }\n .nav-actions { display: flex; gap: 0.75rem; align-items: center; }\n .btn-ghost {\n font-family: var(--font); font-size: 0.875rem; font-weight: 400;\n color: var(--text-secondary); padding: 0.5rem 1.125rem;\n border: 1px solid var(--border); border-radius: 8px;\n transition: border-color 180ms, color 180ms; background: none; cursor: pointer;\n }\n .btn-ghost:hover { border-color: var(--border-hover); color: var(--white); }\n .btn-white {\n font-family: var(--font); font-size: 0.875rem; font-weight: 600;\n color: var(--ink-950); background: var(--white);\n padding: 0.5rem 1.375rem; border-radius: 8px; border: none;\n cursor: pointer; transition: background 180ms, transform 150ms;\n }\n .btn-white:hover { background: var(--off-white); }\n .btn-white:active { transform: scale(0.98); }\n @media (max-width: 900px) { .nav-links { display: none; } }\n\n \/* DIVIDER *\/\n .divider { width: 100%; height: 1px; background: var(--border); }\n\n \/* SECTION LABEL *\/\n .label {\n display: inline-block; font-size: 0.6875rem; font-weight: 600;\n letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);\n margin-bottom: 1.5rem;\n }\n\n \/* ANIMATIONS *\/\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(18px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeOut {\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-14px); }\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(14px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .anim-line {\n display: inline-block; opacity: 0;\n animation: fadeUp 0.75s cubic-bezier(0.16,1,0.3,1) forwards;\n }\n .fade-up {\n opacity: 0; transform: translateY(20px);\n transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1);\n }\n .fade-up.visible { opacity: 1; transform: translateY(0); }\n\n \/* HERO *\/\n #hero {\n min-height: 100dvh; display: flex; align-items: center;\n padding: 9rem 0 7rem; position: relative; overflow: hidden;\n }\n .hero-grid {\n position: absolute; inset: 0;\n background-image:\n linear-gradient(rgba(212,168,83,0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(212,168,83,0.03) 1px, transparent 1px);\n background-size: 80px 80px;\n mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);\n -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);\n }\n .hero-glow {\n position: absolute; top: 25%; left: 50%; transform: translateX(-50%);\n width: 700px; height: 400px;\n background: radial-gradient(ellipse, rgba(212,168,83,0.07) 0%, transparent 70%);\n pointer-events: none;\n }\n .hero-content { position: relative; max-width: 820px; }\n .hero-kicker {\n font-size: 0.875rem; font-weight: 400; color: var(--text-muted);\n letter-spacing: 0.06em; margin-bottom: 2rem;\n }\n h1 {\n font-size: clamp(3rem, 7vw, 6rem);\n font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;\n color: var(--white); margin-bottom: 1.75rem;\n }\n h1 .dim { color: rgba(255,255,255,0.25); }\n .hero-sub {\n font-size: 1.125rem; font-weight: 300; color: var(--text-secondary);\n line-height: 1.6; max-width: 520px; margin-bottom: 2.75rem;\n }\n .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }\n .btn-lg {\n display: inline-flex; align-items: center; gap: 0.5rem;\n font-family: var(--font); font-size: 1rem; font-weight: 600;\n color: var(--ink-950); background: var(--white);\n padding: 1rem 2.25rem; border-radius: 10px; border: none;\n cursor: pointer; transition: background 180ms, transform 150ms;\n }\n .btn-lg:hover { background: var(--off-white); }\n .btn-lg:active { transform: scale(0.98); }\n .btn-lg-ghost {\n display: inline-flex; align-items: center; gap: 0.5rem;\n font-family: var(--font); font-size: 1rem; font-weight: 400;\n color: var(--text-secondary); background: transparent;\n padding: 1rem 2rem; border-radius: 10px; border: 1px solid var(--border);\n transition: border-color 180ms, color 180ms;\n }\n .btn-lg-ghost:hover { border-color: var(--border-hover); color: var(--white); }\n #hero-cycle {\n display: block; font-size: clamp(1.75rem, 4vw, 3.5rem); font-weight: 600;\n line-height: 1.1; letter-spacing: -0.02em; color: rgba(255,255,255,0.55);\n animation: fadeUp 0.75s cubic-bezier(0.16,1,0.3,1) 0.15s both;\n }\n #hero-cycle.out { animation: fadeOut 0.4s cubic-bezier(0.4,0,1,1) forwards; }\n #hero-cycle.in { animation: fadeIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }\n .hero-proof {\n display: flex; gap: 3rem; margin-top: 5rem;\n padding-top: 3rem; border-top: 1px solid var(--border); flex-wrap: wrap;\n }\n .proof-num { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.04em; color: var(--white); margin-bottom: 0.2rem; }\n .proof-lbl { font-size: 0.8125rem; font-weight: 300; color: var(--text-muted); }\n\n \/* START HERE *\/\n #start-here { padding: 7rem 0; background: var(--ink-900); }\n .start-body {\n font-size: 1rem; font-weight: 300; color: var(--text-secondary);\n line-height: 1.7; max-width: 640px; margin-bottom: 3rem;\n }\n .start-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;\n }\n @media (max-width: 860px) { .start-grid { grid-template-columns: repeat(2, 1fr); } }\n @media (max-width: 480px) { .start-grid { grid-template-columns: 1fr; } }\n .start-card {\n background: var(--ink-800); border: 1px solid var(--border); border-radius: 14px;\n padding: 1.75rem; cursor: pointer;\n transition: border-color 200ms, background 200ms, transform 200ms var(--ease);\n display: flex; flex-direction: column; gap: 0.6rem;\n }\n .start-card:hover { border-color: rgba(212,168,83,0.3); background: var(--ink-700); transform: translateY(-2px); }\n .start-card-title { font-size: 1rem; font-weight: 600; color: var(--white); }\n .start-card-desc { font-size: 0.8125rem; font-weight: 300; color: var(--text-secondary); line-height: 1.5; }\n .start-card-arrow { font-size: 0.8125rem; color: var(--accent); margin-top: auto; padding-top: 0.75rem; }\n\n \/* CHECKER *\/\n #checker { padding: 7rem 0; background: var(--ink-950); }\n .checker-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start;\n }\n @media (max-width: 860px) { .checker-inner { grid-template-columns: 1fr; gap: 3rem; } }\n .checker-left {}\n .checker-headline {\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1.25rem;\n }\n .checker-body {\n font-size: 1rem; font-weight: 300; color: var(--text-secondary); line-height: 1.65; margin-bottom: 2rem;\n }\n .checker-disclaimer {\n font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; margin-top: 1.5rem;\n padding: 0.75rem 1rem; border-left: 2px solid var(--border);\n }\n .checker-panel {\n background: var(--ink-900); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;\n }\n .checker-panel-bar {\n display: flex; align-items: center; gap: 0.5rem;\n padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);\n }\n .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-500); }\n .dot:nth-child(1) { background: #ff5f57; }\n .dot:nth-child(2) { background: #febc2e; }\n .dot:nth-child(3) { background: #28c840; }\n .panel-tag {\n margin-left: auto; font-size: 0.625rem; font-weight: 600;\n letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);\n }\n .checker-input-area { padding: 1.25rem; border-bottom: 1px solid var(--border); }\n .checker-input-lbl { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.625rem; }\n .checker-input-text { font-size: 0.9rem; color: var(--white); line-height: 1.55; font-style: italic; }\n .checker-output { padding: 1.25rem; }\n .checker-score-row {\n display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1.25rem;\n }\n .checker-score-num {\n font-size: 2.25rem; font-weight: 700; letter-spacing: -0.04em; color: var(--accent);\n }\n .checker-score-lbl { font-size: 0.75rem; color: var(--text-muted); }\n .checker-section-lbl {\n font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em;\n text-transform: uppercase; color: var(--accent); margin-bottom: 0.625rem;\n }\n .checker-rows { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; }\n .checker-row {\n display: flex; align-items: center; gap: 0.625rem;\n font-size: 0.8125rem; font-weight: 300; color: var(--text-secondary);\n }\n .checker-tick {\n width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0;\n background: rgba(212,168,83,0.1); border: 1px solid rgba(212,168,83,0.25);\n display: flex; align-items: center; justify-content: center;\n font-size: 0.5625rem; color: var(--accent); font-weight: 700;\n }\n .checker-flag {\n width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0;\n background: rgba(255,90,90,0.1); border: 1px solid rgba(255,90,90,0.25);\n display: flex; align-items: center; justify-content: center;\n font-size: 0.5625rem; color: #ff7070; font-weight: 700;\n }\n .checker-cta {\n display: inline-flex; align-items: center; gap: 0.5rem;\n font-family: var(--font); font-size: 0.875rem; font-weight: 600;\n color: var(--ink-950); background: var(--white);\n padding: 0.75rem 1.5rem; border-radius: 8px; border: none;\n cursor: pointer; transition: background 180ms;\n }\n .checker-cta:hover { background: var(--off-white); }\n\n \/* GUIDES *\/\n #guides { padding: 7rem 0; background: var(--ink-900); }\n .guides-body {\n font-size: 1rem; font-weight: 300; color: var(--text-secondary);\n line-height: 1.7; max-width: 600px; margin-bottom: 3rem;\n }\n .guides-grid {\n display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;\n background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;\n }\n @media (max-width: 640px) { .guides-grid { grid-template-columns: 1fr; } }\n .guide-card {\n background: var(--ink-900); padding: 1.5rem 1.75rem;\n display: flex; align-items: center; justify-content: space-between; gap: 1rem;\n transition: background 180ms; cursor: pointer;\n }\n .guide-card:hover { background: var(--ink-700); }\n .guide-title { font-size: 0.9375rem; font-weight: 500; color: var(--white); line-height: 1.4; }\n .guide-arrow { font-size: 0.875rem; color: var(--text-muted); flex-shrink: 0; transition: color 180ms, transform 180ms; }\n .guide-card:hover .guide-arrow { color: var(--accent); transform: translateX(3px); }\n\n \/* HOW WE DO IT *\/\n #how-we-do-it { padding: 6rem 0; }\n .how-headline {\n font-size: clamp(2.5rem, 5vw, 4.5rem);\n font-weight: 700; letter-spacing: -0.03em; line-height: 1.15;\n margin-bottom: 3rem; color: var(--white);\n }\n .how-dim { color: rgba(255,255,255,0.3); }\n .how-tl-outer {\n overflow-x: auto; padding-bottom: 1.5rem;\n -webkit-overflow-scrolling: touch; scrollbar-width: none;\n }\n .how-tl-outer::-webkit-scrollbar { display: none; }\n .how-tl { position: relative; min-width: 680px; padding: 4rem 2rem 3.5rem; }\n .how-tl-track {\n position: absolute; top: calc(4rem + 8px); left: 2rem; right: 2rem;\n height: 2px; background: var(--border);\n }\n .how-tl-fill {\n position: absolute; left: 0; top: 0; height: 100%;\n width: 0%; background: var(--accent);\n transition: width 0.6s cubic-bezier(0.4,0,0.2,1);\n }\n .how-tl-glow {\n position: absolute; top: 50%; width: 20px; height: 20px;\n border-radius: 50%; left: 0%;\n background: var(--accent);\n transform: translate(-50%, -50%);\n box-shadow: 0 0 12px 4px rgba(212,168,83,0.6), 0 0 30px 10px rgba(212,168,83,0.2);\n transition: left 0.6s cubic-bezier(0.4,0,0.2,1);\n pointer-events: none;\n }\n .how-tl-nodes {\n position: relative; display: flex;\n justify-content: space-between; align-items: center;\n }\n .how-node {\n display: flex; flex-direction: column; align-items: center;\n gap: 0; position: relative; z-index: 2;\n }\n .how-node-milestone {\n position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%);\n background: var(--ink-700); border: 1px solid var(--border);\n border-radius: 8px; padding: 0.3rem 0.6rem;\n font-size: 0.7rem; font-weight: 600; color: var(--text-muted);\n white-space: nowrap; opacity: 0;\n transition: opacity 0.4s, border-color 0.4s, color 0.4s;\n pointer-events: none;\n }\n .how-node-milestone::after {\n content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);\n border: 5px solid transparent; border-top-color: var(--border);\n }\n .how-node.active .how-node-milestone,\n .how-node.done .how-node-milestone { opacity: 1; }\n .how-node.active .how-node-milestone { border-color: rgba(212,168,83,0.5); color: var(--accent); }\n .how-node-dot {\n width: 16px; height: 16px; border-radius: 50%;\n border: 2px solid var(--border-hover); background: var(--ink-900);\n transition: border-color 0.4s, background 0.4s, box-shadow 0.4s, transform 0.3s;\n position: relative;\n }\n .how-node.done .how-node-dot { border-color: var(--accent); background: var(--accent); }\n .how-node.active .how-node-dot {\n border-color: var(--accent); background: var(--ink-900);\n box-shadow: 0 0 0 4px rgba(212,168,83,0.2), 0 0 16px rgba(212,168,83,0.5);\n transform: scale(1.4);\n }\n .how-node.active .how-node-dot::after {\n content: ''; position: absolute; inset: -6px;\n border-radius: 50%; border: 1.5px solid rgba(212,168,83,0.4);\n animation: nodePulse 1.2s ease-out infinite;\n }\n @keyframes nodePulse {\n 0% { transform: scale(1); opacity: 0.8; }\n 100% { transform: scale(2.2); opacity: 0; }\n }\n .how-node-label {\n position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);\n font-size: 0.7rem; font-weight: 500; color: var(--text-muted);\n white-space: nowrap; text-transform: uppercase; letter-spacing: 0.08em;\n transition: color 0.4s;\n }\n .how-node.done .how-node-label { color: var(--text-secondary); }\n .how-node.active .how-node-label { color: var(--accent); font-weight: 700; }\n .how-footnote {\n margin-top: 1.5rem; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.02em;\n }\n\n \/* MECHANICS *\/\n #mechanics { padding: 7rem 0; background: var(--ink-900); }\n .mechanics-headline {\n font-size: clamp(2.5rem, 5vw, 4.5rem);\n font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 3rem;\n }\n .mech-grid {\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;\n background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;\n }\n .mech-card {\n background: var(--ink-900); padding: 1.75rem 1.5rem;\n transition: background 200ms; cursor: default;\n }\n .mech-card:hover { background: var(--ink-700); }\n .mech-name { font-size: 0.9375rem; font-weight: 600; color: var(--white); margin-bottom: 0.5rem; }\n .mech-desc { font-size: 0.8125rem; font-weight: 300; color: var(--text-secondary); line-height: 1.5; }\n @media (max-width: 900px) { .mech-grid { grid-template-columns: repeat(2, 1fr); } }\n @media (max-width: 480px) { .mech-grid { grid-template-columns: 1fr; } }\n\n \/* CAMPAIGNS *\/\n #campaigns { padding: 7rem 0; background: var(--ink-950); }\n .campaigns-headline {\n font-size: clamp(1.75rem, 3.5vw, 2.75rem);\n font-weight: 600; letter-spacing: -0.03em; margin-bottom: 3rem;\n }\n .camp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }\n .camp-card {\n background: var(--ink-900); border: 1px solid var(--border); border-radius: 14px;\n padding: 1.75rem; transition: border-color 200ms, transform 300ms var(--ease), background 200ms;\n }\n .camp-card:hover { border-color: var(--border-hover); background: var(--ink-800); transform: translateY(-2px); }\n .camp-cat {\n font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;\n text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;\n }\n .camp-title { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 1.25rem; line-height: 1.35; }\n .camp-result { font-size: 0.875rem; font-weight: 300; color: var(--text-secondary); line-height: 1.5; }\n @media (max-width: 768px) { .camp-grid { grid-template-columns: 1fr; } }\n\n \/* FROM IDEA TO LAUNCH *\/\n #compiler { padding: 7rem 0; background: var(--ink-900); }\n .compiler-inner {\n display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;\n }\n .compiler-headline {\n font-size: clamp(1.75rem, 3.5vw, 2.75rem);\n font-weight: 600; letter-spacing: -0.03em; margin-bottom: 1.25rem;\n }\n .compiler-headline .dim { color: rgba(255,255,255,0.25); }\n .compiler-body {\n font-size: 1rem; font-weight: 300; color: var(--text-secondary); line-height: 1.65; margin-bottom: 2rem;\n }\n .compiler-demo {\n background: var(--ink-950); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;\n }\n .demo-bar {\n display: flex; align-items: center; gap: 0.5rem;\n padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);\n }\n .demo-tag {\n margin-left: auto; font-size: 0.625rem; font-weight: 600;\n letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);\n }\n .demo-input { padding: 1.25rem; border-bottom: 1px solid var(--border); }\n .demo-prompt-lbl { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.625rem; }\n .demo-quote { font-size: 0.9375rem; color: var(--white); line-height: 1.5; font-style: italic; }\n .demo-output { padding: 1.25rem; }\n .demo-output-lbl { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }\n .demo-rows { display: flex; flex-direction: column; gap: 0.5rem; }\n .demo-row {\n display: flex; align-items: center; gap: 0.75rem;\n font-size: 0.8125rem; font-weight: 300; color: var(--text-secondary);\n }\n .demo-check {\n width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0;\n background: rgba(212,168,83,0.12); border: 1px solid rgba(212,168,83,0.25);\n display: flex; align-items: center; justify-content: center;\n font-size: 0.5625rem; color: var(--accent); font-weight: 700;\n }\n @media (max-width: 860px) { .compiler-inner { grid-template-columns: 1fr; gap: 3rem; } }\n\n \/* BOOK *\/\n #book { padding: 7rem 0; background: var(--ink-950); }\n .book-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }\n .book-left { position: sticky; top: 8rem; }\n .book-headline {\n font-size: clamp(1.75rem, 3.5vw, 2.75rem);\n font-weight: 600; letter-spacing: -0.03em; margin-bottom: 1rem;\n }\n .book-headline .dim { color: rgba(255,255,255,0.25); }\n .book-body { font-size: 1rem; font-weight: 300; color: var(--text-secondary); line-height: 1.65; }\n .form-card { background: var(--ink-900); border: 1px solid var(--border); border-radius: 18px; padding: 2.25rem; }\n .fg { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }\n .fg:last-child { margin-bottom: 0; }\n .fl { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }\n .fi, .ft {\n font-family: var(--font); font-size: 0.9375rem; font-weight: 300;\n color: var(--white); background: var(--ink-950);\n border: 1px solid var(--border); border-radius: 9px;\n padding: 0.75rem 1rem; outline: none; width: 100%;\n transition: border-color 180ms;\n }\n .fi::placeholder, .ft::placeholder { color: var(--text-muted); }\n .fi:focus, .ft:focus { border-color: rgba(255,255,255,0.2); }\n .ft { resize: none; line-height: 1.5; }\n .fsub {\n width: 100%; margin-top: 0.5rem; font-family: var(--font); font-size: 1rem; font-weight: 600;\n color: var(--ink-950); background: var(--white); border: none; border-radius: 9px;\n padding: 0.9375rem; cursor: pointer; transition: background 180ms, transform 150ms;\n }\n .fsub:hover { background: var(--off-white); }\n .fsub:active { transform: scale(0.99); }\n .fnote { text-align: center; font-size: 0.8125rem; font-weight: 300; color: var(--text-muted); margin-top: 0.875rem; }\n .form-success { text-align: center; padding: 3.5rem 1.5rem; }\n .form-success-mark { font-size: 2rem; margin-bottom: 1.25rem; }\n .form-success h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.625rem; }\n .form-success p { font-size: 0.9375rem; font-weight: 300; color: var(--text-secondary); }\n @media (max-width: 860px) {\n .book-inner { grid-template-columns: 1fr; gap: 3.5rem; }\n .book-left { position: static; }\n }\n\n \/* FOOTER *\/\n footer { padding: 3.5rem 0; border-top: 1px solid var(--border); }\n .foot-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }\n .foot-logo img { height: 16px; opacity: 0.4; }\n .foot-links { display: flex; gap: 1.75rem; list-style: none; flex-wrap: wrap; }\n .foot-links a { font-size: 0.8125rem; font-weight: 300; color: var(--text-muted); transition: color 180ms; }\n .foot-links a:hover { color: var(--text-secondary); }\n .foot-copy { font-size: 0.8125rem; font-weight: 300; color: var(--text-muted); }\n <\/style>\n<\/head>\n<body>\n\n<!-- NAV -->\n<nav id=\"nav\">\n <div class=\"container\">\n <div class=\"nav-inner\">\n <a href=\"#\" class=\"nav-logo\"><img src=https:\/\/turnstylehost.com\/campaign\/wp-content\/uploads\/2025\/12\/tstyletext-scaled.png\" alt=\"Turnstyle\" \/><\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#guides\">Promotion Guides<\/a><\/li>\n <li><a href=\"#checker\">Free Promotion Checker<\/a><\/li>\n <li><a href=\"#mechanics\">What We Build<\/a><\/li>\n <li><a href=\"#campaigns\">Campaigns<\/a><\/li>\n <\/ul>\n <div class=\"nav-actions\">\n <a href=\"https:\/\/app.turnstylehost.com\/login\" target=\"_blank\" class=\"btn-ghost\">Login<\/a>\n <a href=\"#checker\" class=\"btn-white\">Check My Promotion<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/nav>\n\n<!-- HERO -->\n<section id=\"hero\">\n <div class=\"hero-grid\"><\/div>\n <div class=\"hero-glow\"><\/div>\n <div class=\"container\">\n <div class=\"hero-content\">\n <p class=\"hero-kicker\">Sales Promotions \u00b7 State Permits \u00b7 Prize Draws \u00b7 Cashback \u00b7 Instant Win<\/p>\n <h1>\n Sales promotions<br\/><span id=\"hero-cycle\">built in days, not weeks.<\/span>\n <\/h1>\n <p class=\"hero-sub\">\n <span class=\"anim-line\" style=\"animation-delay:0.5s; display:block;\">Compliant promotions, plain-English guides and free tools \u2014 so you can move fast without getting it wrong.<\/span>\n <\/p>\n <div class=\"hero-ctas\">\n <a href=\"#checker\" class=\"btn-lg\">Check My Promotion \u2192<\/a>\n <a href=\"#guides\" class=\"btn-lg-ghost\">Browse Promotion Guides<\/a>\n <\/div>\n <div class=\"hero-proof\">\n <div>\n <div class=\"proof-num\">20+<\/div>\n <div class=\"proof-lbl\">Years running promotions<\/div>\n <\/div>\n <div>\n <div class=\"proof-num\">100s<\/div>\n <div class=\"proof-lbl\">Campaigns built and launched<\/div>\n <\/div>\n <div>\n <div class=\"proof-num\">Days<\/div>\n <div class=\"proof-lbl\">Not weeks, not quarters<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n<!-- START HERE -->\n<section id=\"start-here\">\n <div class=\"container\">\n <span class=\"label\">Start Here<\/span>\n <h2 class=\"fade-up\" style=\"font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1.25rem;\">Planning a promotion?<br\/><span style=\"color: rgba(255,255,255,0.3);\">Start here.<\/span><\/h2>\n <p class=\"start-body\">Free tools and plain-English guides to help you understand permits, terms, prize draws, cashback, instant win and compliant campaign setup \u2014 before you spend a cent.<\/p>\n <div class=\"start-grid\">\n <a href=\"#checker\" class=\"start-card\">\n <div class=\"start-card-title\">Free Promotion Checker<\/div>\n <div class=\"start-card-desc\">Paste your idea or terms and get an instant risk score.<\/div>\n <div class=\"start-card-arrow\">Run free check \u2192<\/div>\n <\/a>\n <a href=\"#checker\" class=\"start-card\">\n <div class=\"start-card-title\">Permit Finder<\/div>\n <div class=\"start-card-desc\">See which Australian states may require permits for your promotion.<\/div>\n <div class=\"start-card-arrow\">Check permit requirements \u2192<\/div>\n <\/a>\n <a href=\"#checker\" class=\"start-card\">\n <div class=\"start-card-title\">Terms Preflight<\/div>\n <div class=\"start-card-desc\">Check whether your terms cover the basics before you publish.<\/div>\n <div class=\"start-card-arrow\">Review my terms \u2192<\/div>\n <\/a>\n <a href=\"#guides\" class=\"start-card\">\n <div class=\"start-card-title\">Promotion Guides<\/div>\n <div class=\"start-card-desc\">Plain-English explainers, rules and campaign ideas for Australian promotions.<\/div>\n <div class=\"start-card-arrow\">Browse guides \u2192<\/div>\n <\/a>\n <a href=\"#book\" class=\"start-card\">\n <div class=\"start-card-title\">Promotion Builder<\/div>\n <div class=\"start-card-desc\">Turn a rough idea into a full campaign structure. Send us what you've got.<\/div>\n <div class=\"start-card-arrow\">Send your brief \u2192<\/div>\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n<!-- FREE PROMOTION CHECKER -->\n<section id=\"checker\">\n <div class=\"container\">\n <div class=\"checker-inner\">\n <div class=\"checker-left\">\n <span class=\"label\">Free Promotion Checker<\/span>\n <h2 class=\"checker-headline fade-up\">Check your promotion<br\/>before it becomes<br\/>a problem.<\/h2>\n <p class=\"checker-body\">Paste your promotion idea, draft terms or campaign summary. We give you a simple score and flag the obvious gaps before you launch.<\/p>\n <a href=\"#book\" class=\"checker-cta\">Run Free Check \u2192<\/a>\n <p class=\"checker-disclaimer\">This is general promotional guidance only, not legal advice.<\/p>\n <\/div>\n <div>\n <div class=\"checker-panel\">\n <div class=\"checker-panel-bar\">\n <div class=\"dot\"><\/div><div class=\"dot\"><\/div><div class=\"dot\"><\/div>\n <span class=\"panel-tag\">Promotion Checker<\/span>\n <\/div>\n <div class=\"checker-input-area\">\n <div class=\"checker-input-lbl\">Your promotion idea<\/div>\n <div class=\"checker-input-text\">\"Spend $100 on selected products and go in the draw to win a Ranger Raptor. Runs nationally from August to October.\"<\/div>\n <\/div>\n <div class=\"checker-output\">\n <div class=\"checker-score-row\">\n <div class=\"checker-score-num\">74<\/div>\n <div class=\"checker-score-lbl\">\/ 100   Promotion Score<\/div>\n <\/div>\n <div class=\"checker-section-lbl\">Detected<\/div>\n <div class=\"checker-rows\">\n <div class=\"checker-row\"><div class=\"checker-tick\">\u2713<\/div>Purchase-based prize draw<\/div>\n <div class=\"checker-row\"><div class=\"checker-tick\">\u2713<\/div>National campaign<\/div>\n <div class=\"checker-row\"><div class=\"checker-tick\">\u2713<\/div>High-value prize<\/div>\n <div class=\"checker-row\"><div class=\"checker-tick\">\u2713<\/div>Permit review required<\/div>\n <\/div>\n <div class=\"checker-section-lbl\">Likely gaps<\/div>\n <div class=\"checker-rows\">\n <div class=\"checker-row\"><div class=\"checker-flag\">!<\/div>NSW \/ ACT \/ SA permit requirements need review<\/div>\n <div class=\"checker-row\"><div class=\"checker-flag\">!<\/div>Draw method not specified<\/div>\n <div class=\"checker-row\"><div class=\"checker-flag\">!<\/div>Winner notification process not clear<\/div>\n <div class=\"checker-row\"><div class=\"checker-flag\">!<\/div>Prize valuation missing<\/div>\n <div class=\"checker-row\"><div class=\"checker-flag\">!<\/div>Terms need full conditions<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n<!-- GUIDES -->\n<section id=\"guides\">\n <div class=\"container\">\n <span class=\"label\">Promotion Guides<\/span>\n <h2 class=\"fade-up\" style=\"font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1.25rem;\">Free promotion guidance.<br\/><span style=\"color: rgba(255,255,255,0.3);\">No legal lecture. No gatekeeping.<\/span><\/h2>\n <p class=\"guides-body\">Practical guides for marketers, sales teams and agencies running sales promotions in Australia and New Zealand.<\/p>\n <div class=\"guides-grid\">\n <a href=\"#\" class=\"guide-card\"><span class=\"guide-title\">NSW Trade Promotion Permits Explained<\/span><span class=\"guide-arrow\">\u2192<\/span><\/a>\n <a href=\"#\" class=\"guide-card\"><span class=\"guide-title\">SA Lottery Permit Rules<\/span><span class=\"guide-arrow\">\u2192<\/span><\/a>\n <a href=\"#\" class=\"guide-card\"><span class=\"guide-title\">ACT Trade Promotion Requirements<\/span><span class=\"guide-arrow\">\u2192<\/span><\/a>\n <a href=\"#\" class=\"guide-card\"><span class=\"guide-title\">Instant Win vs Prize Draw<\/span><span class=\"guide-arrow\">\u2192<\/span><\/a>\n <a href=\"#\" class=\"guide-card\"><span class=\"guide-title\">Cashback vs Redemption Campaigns<\/span><span class=\"guide-arrow\">\u2192<\/span><\/a>\n <a href=\"#\" class=\"guide-card\"><span class=\"guide-title\">How Long Does It Take To Run A Promotion?<\/span><span class=\"guide-arrow\">\u2192<\/span><\/a>\n <a href=\"#\" class=\"guide-card\"><span class=\"guide-title\">What Makes A Promotion Compliant?<\/span><span class=\"guide-arrow\">\u2192<\/span><\/a>\n <a href=\"#\" class=\"guide-card\"><span class=\"guide-title\">Can I Give Away A Car?<\/span><span class=\"guide-arrow\">\u2192<\/span><\/a>\n <a href=\"#\" class=\"guide-card\"><span class=\"guide-title\">Trade Promotion Rules 2026<\/span><span class=\"guide-arrow\">\u2192<\/span><\/a>\n <a href=\"#\" class=\"guide-card\"><span class=\"guide-title\">Sales Promotion Ideas That Actually Work<\/span><span class=\"guide-arrow\">\u2192<\/span><\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n<!-- HOW WE DO IT -->\n<section id=\"how-we-do-it\">\n <div class=\"container\">\n <span class=\"label\">How We Do It<\/span>\n <h2 class=\"how-headline fade-up\">Go to WOW.<br\/><span class=\"how-dim anim-line\" style=\"animation-delay:0.3s;\">Faster than you think, get on board.<\/span><\/h2>\n <div class=\"how-tl-outer\">\n <div class=\"how-tl\" id=\"howTl\">\n <div class=\"how-tl-track\">\n <div class=\"how-tl-fill\" id=\"howFill\"><\/div>\n <div class=\"how-tl-glow\" id=\"howGlow\"><\/div>\n <\/div>\n <div class=\"how-tl-nodes\" id=\"howNodes\"><\/div>\n <\/div>\n <\/div>\n <p class=\"how-footnote\">* Depending on prize value and operating States.<\/p>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n<!-- WHAT WE BUILD -->\n<section id=\"mechanics\">\n <div class=\"container\">\n <span class=\"label\">What We Build<\/span>\n <h2 class=\"mechanics-headline fade-up\">Campaigns built to move product.<br\/><span style=\"color: rgba(255,255,255,0.3);\">Compliant. Fast. Ready to launch.<\/span><\/h2>\n <div class=\"mech-grid\">\n <div class=\"mech-card\">\n <div class=\"mech-name\">Prize Draw<\/div>\n <div class=\"mech-desc\">Buy to enter, draw to win. Drives purchase volume with full permit and compliance handling.<\/div>\n <\/div>\n <div class=\"mech-card\">\n <div class=\"mech-name\">Instant Win<\/div>\n <div class=\"mech-desc\">Every entry wins or loses on the spot. High engagement, fast product movement.<\/div>\n <\/div>\n <div class=\"mech-card\">\n <div class=\"mech-name\">Cashback<\/div>\n <div class=\"mech-desc\">Buy the product, claim the cash. Shifts decisions at shelf and processes claims automatically.<\/div>\n <\/div>\n <div class=\"mech-card\">\n <div class=\"mech-name\">Redemption<\/div>\n <div class=\"mech-desc\">Spend earns rewards. Keeps customers buying and captures transaction data.<\/div>\n <\/div>\n <div class=\"mech-card\">\n <div class=\"mech-name\">Limited Offer<\/div>\n <div class=\"mech-desc\">Time-bound offers structured to create urgency and clear stock.<\/div>\n <\/div>\n <div class=\"mech-card\">\n <div class=\"mech-name\">Pure Random<\/div>\n <div class=\"mech-desc\">No purchase needed. Maximum reach. Auditable and defensible every time.<\/div>\n <\/div>\n <div class=\"mech-card\">\n <div class=\"mech-name\">Watch2Win<\/div>\n <div class=\"mech-desc\">Watch the content, enter the draw. Gets your message seen and your product remembered.<\/div>\n <\/div>\n <div class=\"mech-card\">\n <div class=\"mech-name\">Learn & Earn<\/div>\n <div class=\"mech-desc\">Train your trade, reward the effort. Reps who know your product sell more of it.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n<!-- CAMPAIGNS -->\n<section id=\"campaigns\">\n <div class=\"container\">\n <span class=\"label\">Campaigns We've Run<\/span>\n <h2 class=\"campaigns-headline fade-up\">Data Doesn't Lie.<\/h2>\n <div class=\"camp-grid\">\n <div class=\"camp-card\">\n <div class=\"camp-cat\">Cashback \u00b7 FMCG<\/div>\n <div class=\"camp-title\">STEDI Cashback<\/div>\n <div class=\"camp-result\">400+ retail outlets. Claims processed automatically. Not a single one handled manually.<\/div>\n <\/div>\n <div class=\"camp-card\">\n <div class=\"camp-cat\">Prize Draw \u00b7 Trade<\/div>\n <div class=\"camp-title\">Free Hot Water for 70 Days<\/div>\n <div class=\"camp-result\">42,000 entries. Live in 11 days. Every permit sorted. Ran clean from start to finish.<\/div>\n <\/div>\n <div class=\"camp-card\">\n <div class=\"camp-cat\">Learn & Earn \u00b7 Automotive<\/div>\n <div class=\"camp-title\">Trade Incentive Program<\/div>\n <div class=\"camp-result\">3\u00d7 the redemption rate of anything they'd run before. 4 states. Zero manual fulfilment.<\/div>\n <\/div>\n <div class=\"camp-card\">\n <div class=\"camp-cat\">Instant Win \u00b7 QSR<\/div>\n <div class=\"camp-title\">High-Volume Instant Win<\/div>\n <div class=\"camp-result\">200,000 plays. Every result verified in real time. Full audit trail. Zero disputes.<\/div>\n <\/div>\n <div class=\"camp-card\">\n <div class=\"camp-cat\">Watch2Win \u00b7 FMCG<\/div>\n <div class=\"camp-title\">Watch2Win Product Launch<\/div>\n <div class=\"camp-result\">3\u00d7 industry average completion rate. Every entry earned. Every view measured.<\/div>\n <\/div>\n <div class=\"camp-card\">\n <div class=\"camp-cat\">Learn & Earn \u00b7 Channel<\/div>\n <div class=\"camp-title\">National Trade Education Program<\/div>\n <div class=\"camp-result\">6 product modules. Thousands of completions. Rewards delivered without lifting a finger.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n<!-- FROM IDEA TO LAUNCH -->\n<section id=\"compiler\">\n <div class=\"container\">\n <div class=\"compiler-inner\">\n <div class=\"compiler-left\">\n <span class=\"label\">From Idea to Launch<\/span>\n <h2 class=\"compiler-headline fade-up\">\n Tell us the promotion.<br\/>\n <span class=\"dim\">We'll structure the campaign.<\/span>\n <\/h2>\n <p class=\"compiler-body\">\n Give us the rough version. We identify the mechanic, flag likely permit requirements, draft the terms, map the customer journey and prepare the launch plan.\n <\/p>\n <a href=\"#book\" class=\"btn-lg\" style=\"margin-top:0.5rem;\">Send Your Brief \u2192<\/a>\n <\/div>\n <div>\n <div class=\"compiler-demo\">\n <div class=\"demo-bar\">\n <div class=\"dot\"><\/div><div class=\"dot\"><\/div><div class=\"dot\"><\/div>\n <span class=\"demo-tag\">Idea to Launch<\/span>\n <\/div>\n <div class=\"demo-input\">\n <div class=\"demo-prompt-lbl\">Rough idea<\/div>\n <div class=\"demo-quote\">\"Spend $100 and win a ute.\"<\/div>\n <\/div>\n <div class=\"demo-output\">\n <div class=\"demo-output-lbl\">What we do with it<\/div>\n <div class=\"demo-rows\">\n <div class=\"demo-row\"><div class=\"demo-check\">\u2713<\/div>Mechanic confirmed \u2014 purchase-based prize draw<\/div>\n <div class=\"demo-row\"><div class=\"demo-check\">\u2713<\/div>Permits identified \u2014 NSW, ACT, SA<\/div>\n <div class=\"demo-row\"><div class=\"demo-check\">\u2713<\/div>Terms and conditions drafted<\/div>\n <div class=\"demo-row\"><div class=\"demo-check\">\u2713<\/div>Entry mechanic and customer journey built<\/div>\n <div class=\"demo-row\"><div class=\"demo-check\">\u2713<\/div>Operational task list prepared<\/div>\n <div class=\"demo-row\"><div class=\"demo-check\">\u2713<\/div>Campaign ready to launch<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"divider\"><\/div>\n\n<!-- BOOK -->\n<section id=\"book\">\n <div class=\"container\">\n <div class=\"book-inner\">\n <div class=\"book-left\">\n <span class=\"label\">Ready to Run?<\/span>\n <h2 class=\"book-headline fade-up\">\n Got a promotion to launch?<br\/>\n <span class=\"dim\">Send the rough version.<\/span>\n <\/h2>\n <p class=\"book-body\" style=\"margin-top:1.25rem;\">\n You do not need a perfect brief. Tell us what you want to sell, who you need to motivate and when you need to be live.\n <\/p>\n <\/div>\n <div>\n <div class=\"form-card\" id=\"form-card\">\n <div class=\"fg\">\n <label class=\"fl\">Name<\/label>\n <input type=\"text\" class=\"fi\" placeholder=\"Your name\" id=\"f-name\" \/>\n <\/div>\n <div class=\"fg\">\n <label class=\"fl\">Email<\/label>\n <input type=\"email\" class=\"fi\" placeholder=\"you@company.com\" id=\"f-email\" \/>\n <\/div>\n <div class=\"fg\">\n <label class=\"fl\">What are you trying to run?<\/label>\n <textarea class=\"ft\" rows=\"5\" placeholder=\"Example: Spend $100, win a car. Trade customers only. National. Need it live in four weeks.\" id=\"f-brief\"><\/textarea>\n <\/div>\n <button class=\"fsub\" onclick=\"submitForm()\">Send Promotion Brief \u2192<\/button>\n <p class=\"fnote\">We'll come back within one business day.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- FOOTER -->\n<footer>\n <div class=\"container\">\n <div class=\"foot-inner\">\n <div class=\"foot-logo\"><img src=https:\/\/turnstylehost.com\/campaign\/wp-content\/uploads\/2025\/12\/tstyletext-scaled.png alt=\"Turnstyle\" \/><\/div>\n <ul class=\"foot-links\">\n <li><a href=\"#guides\">Promotion Guides<\/a><\/li>\n <li><a href=\"#checker\">Free Promotion Checker<\/a><\/li>\n <li><a href=\"#mechanics\">What We Build<\/a><\/li>\n <li><a href=\"#campaigns\">Campaigns<\/a><\/li>\n <li><a href=\"https:\/\/app.turnstylehost.com\/login\" target=\"_blank\">Login<\/a><\/li>\n <\/ul>\n <span class=\"foot-copy\">\u00a9 2026 Turnstyle. Compliant sales promotions, built fast.<\/span>\n <\/div>\n <\/div>\n<\/footer>\n\n<script>\n \/\/ Nav scroll\n const nav = document.getElementById('nav');\n window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 40), { passive: true });\n\n \/\/ Hero headline cycle\n const cycleEl = document.getElementById('hero-cycle');\n const lines = ['built in days, not weeks.', 'compliant from day one.', 'permits sorted. terms done.'];\n let idx = 0;\n function cycleLine() {\n cycleEl.classList.remove('in');\n cycleEl.classList.add('out');\n setTimeout(() => {\n idx = (idx + 1) % lines.length;\n cycleEl.textContent = lines[idx];\n cycleEl.classList.remove('out');\n cycleEl.classList.add('in');\n }, 420);\n }\n setTimeout(() => { setInterval(cycleLine, 5000); }, 3000);\n\n \/\/ Scroll fade-up\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); }\n });\n }, { threshold: 0.15 });\n document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n\n \/\/ HOW WE DO IT \u2014 animated timeline\n (function() {\n const nodes = [\n { label: 'Brief', milestone: null },\n { label: 'Scope', milestone: null },\n { label: 'Draft', milestone: null },\n { label: 'Quote', milestone: '30 sec' },\n { label: 'Full Terms', milestone: null },\n { label: 'Review', milestone: '5 min' },\n { label: 'Submission', milestone: null },\n { label: 'Approval', milestone: null },\n { label: 'Live', milestone: '5 days*' },\n ];\n\n const container = document.getElementById('howNodes');\n const fill = document.getElementById('howFill');\n const glow = document.getElementById('howGlow');\n if (!container) return;\n\n nodes.forEach((n, i) => {\n const el = document.createElement('div');\n el.className = 'how-node';\n el.id = 'hwn' + i;\n const ms = n.milestone ? '<div class=\"how-node-milestone\">' + n.milestone + '<\/div>' : '';\n el.innerHTML = ms + '<div class=\"how-node-dot\"><\/div><div class=\"how-node-label\">' + n.label + '<\/div>';\n container.appendChild(el);\n });\n\n let running = false;\n var nodePositions = null;\n\n function calcPositions() {\n var track = fill.parentElement;\n var trackRect = track.getBoundingClientRect();\n nodePositions = nodes.map(function(_, i) {\n var dot = document.querySelector('#hwn' + i + ' .how-node-dot');\n if (!dot) return (i \/ (nodes.length - 1)) * 100;\n var r = dot.getBoundingClientRect();\n var cx = r.left + r.width \/ 2;\n return ((cx - trackRect.left) \/ trackRect.width) * 100;\n });\n }\n\n function run() {\n if (running) return;\n running = true;\n calcPositions();\n let step = 0;\n const STEP_MS = 700;\n nodes.forEach((_, i) => { document.getElementById('hwn' + i).classList.remove('active', 'done'); });\n fill.style.width = nodePositions[0] + '%';\n glow.style.left = nodePositions[0] + '%';\n\n function advance() {\n if (step >= nodes.length) {\n setTimeout(function() { running = false; run(); }, 3000);\n return;\n }\n if (step > 0) {\n var prev = document.getElementById('hwn' + (step - 1));\n prev.classList.remove('active');\n prev.classList.add('done');\n }\n var el = document.getElementById('hwn' + step);\n el.classList.add('active');\n fill.style.width = nodePositions[step] + '%';\n glow.style.left = nodePositions[step] + '%';\n step++;\n setTimeout(advance, STEP_MS);\n }\n advance();\n }\n\n var howObs = new IntersectionObserver(function(entries) {\n if (entries[0].isIntersecting) run();\n }, { threshold: 0.2 });\n var sec = document.getElementById('how-we-do-it');\n if (sec) howObs.observe(sec);\n })();\n\n \/\/ Form submit\n function submitForm() {\n const name = document.getElementById('f-name').value.trim();\n const email = document.getElementById('f-email').value.trim();\n if (!name || !email) { alert('Please enter your name and email.'); return; }\n document.getElementById('form-card').innerHTML = `\n <div class=\"form-success\">\n <div class=\"form-success-mark\">\u2713<\/div>\n <h3>Brief received.<\/h3>\n <p>We'll come back within one business day, ready to talk specifics.<\/p>\n <\/div>`;\n }\n\n \/\/ Smooth scroll\n document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\n a.addEventListener('click', e => {\n const t = document.querySelector(a.getAttribute('href'));\n if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth', block: 'start' }); }\n });\n });\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Turnstyle \u2014 Compliant Sales Promotions, Built Fast<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-257","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/turnstylehost.com\/campaign\/wp-json\/wp\/v2\/pages\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turnstylehost.com\/campaign\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/turnstylehost.com\/campaign\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/turnstylehost.com\/campaign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/turnstylehost.com\/campaign\/wp-json\/wp\/v2\/comments?post=257"}],"version-history":[{"count":216,"href":"https:\/\/turnstylehost.com\/campaign\/wp-json\/wp\/v2\/pages\/257\/revisions"}],"predecessor-version":[{"id":53308,"href":"https:\/\/turnstylehost.com\/campaign\/wp-json\/wp\/v2\/pages\/257\/revisions\/53308"}],"wp:attachment":[{"href":"https:\/\/turnstylehost.com\/campaign\/wp-json\/wp\/v2\/media?parent=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}