/* SquareLog mobile promo page styles. All colors, fonts, radii route through tokens in /css/app.css. No raw hex. No literal rgba(). The theme-discipline gate enforces this. */ /* Section lede (shared rhythm for sub-headlines under H2) --------------- */ .sq-section-lede { color: var(--text-body); max-width: 720px; font-size: 17px; line-height: 1.6; margin-top: 8px; } /* Store buttons --------------------------------------------------------- */ .sq-m-stores { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; } .sq-m-store-btn { display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px; border-radius: 12px; border: 1px solid var(--line); background: var(--coal-2); color: var(--bone); text-decoration: none; font-family: "Albert Sans", system-ui, sans-serif; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; min-width: 200px; } .sq-m-store-btn:hover { transform: translate(-1px, -1px); border-color: var(--bone); background: var(--coal-3); } .sq-m-store-btn[data-state="coming-soon"] { opacity: 0.9; } .sq-m-store-btn[data-state="coming-soon"]:hover, .sq-m-store-btn[data-state="beta"]:hover { transform: translate(-1px, -1px); } .sq-m-store-btn[data-state="beta"] { border-color: var(--line-lime); } .sq-m-store-btn[data-state="beta"]:hover { border-color: var(--lime); } .sq-m-store-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; line-height: 1; margin-bottom: 4px; } .sq-m-store-btn[data-state="beta"] .sq-m-store-eyebrow { color: var(--lime); } .sq-m-store-label { font-family: "Unbounded", "Albert Sans", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -0.02em; line-height: 1.1; } /* Feature grid override — denser than landing-page features */ .sq-m-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 28px; } /* UA-conditional reveal: mobile.js sets data-ua-platform on . Future hook for device-specific copy; unused at v1 but harmless. */ html:not([data-ua-platform="ios"]) .sq-m-ua-ios-only { display: none; } html:not([data-ua-platform="android"]) .sq-m-ua-android-only { display: none; } /* Light-mode token swap is inherited from app.css — nothing to redefine here. */