@charset "UTF-8"; /* The Pocket App Company — shared stylesheet for the marketing site. --------------------------------------------------------------------------- Dark-glass design system translated from the Stitch round-1 designs (docs/design/marketing/stitch-round1/). Plain CSS, no build step. One font (Inter, loaded by each page with a single Google Fonts ); monospace labels use the system mono stack so nothing else is downloaded. ACCENT SWITCH The old body classes .t-pocketboss / .t-mucknotes / .t-almoner still work, and the same names can be used on any element (.accent-pocketboss etc.) to recolour one card on a page that is otherwise neutral. LAYOUT .container centred, max 1200px, 16px side gutter on phones main defaults to a 780px reading measure (long-form pages) main.wide full 1200px marketing page .section vertical rhythm between page sections (padding 56/96px) .section-head eyebrow + h2 + optional .lede-text; add .center or .split (.split puts the lede beside the h2 on desktop) .eyebrow / .kick small tracked monospace label in the accent colour; add .pill for the capsule with the LED dot .glow decorative blurred colour blob; put inside a position:relative parent with overflow:clip; .glow.b/.c vary the placement and colour; aria-hidden it NAV header.site sticky blurred bar; .brand (left, gets a mark), nav (capsule of links, wraps on phones), .nav-side (right-hand links/buttons, optional) a[aria-current="page"] is the lit tab BUTTONS .cta accent-filled pill (primary action) .cta.alt glass pill (secondary) .cta.soft accent-tinted pill (tertiary, used inside cards) .cta.sm smaller pill for card footers and chip rows .ctas wrapping row of buttons HERO .hero centred stack: .eyebrow.pill, h1, .hero-lede, .ctas, .stats .stats 4-up tile bar (2-up on phones): .stat > .stat-k (label), .stat-v (value), .stat-d (one-line detail) CARDS .cards grid of .card; .cols-2 / .cols-3 / .cols-4 set the desktop column count (default 3), always 1 column on phones .card glass card: h3 + p; optional .idx (monospace number, top-left) and .card.span-2 to span two columns .lede highlighted glass panel (h2/h3 + p) used for the one sentence a page must get across (money, records) .callout slim horizontal banner (icon dot + text + optional link) APP CARDS (company home) .apps 3-up grid of .app cards, each carrying data-app="…" .app .tag (capsule label) + .idx (#01) + icon img.app-icon + h3 + p + .preview (screenshot window) + .links (.cta.soft full-width, then a 2-up row of .cta.alt.sm) PRICING .tiers 2-up grid (.three for 3-up) of .tier; .tier.paid is the highlighted plan; .name / .amount / .per / ul (ticks); optional .badge (small capsule, top-right) on a tier .lede.split the lede panel as two columns on desktop: text left, a .mini-stats row (3 small .stat tiles) or an image right COMPARISON TABLE .table-scroll horizontal scroll wrapper; table inside gets the dark ledger look; th[scope=row] is the feature name NUMBERED CARDS ("How it is different") .steps grid of .step (glass card with .idx number) — same as .cards .card with .idx, kept as its own name for clarity SCREENSHOTS ("What it looks like") .shots horizontal snap-scrolling strip of
phone frames; img 540x960 sits in a dark rounded frame; figcaption below .shots.grid lays them out as a wrapping grid instead; .shots.wide is for landscape (desktop/tablet) captures FAQ .faq section wrapper; legacy h3 + p pairs still render as cards .faq .qa-grid two-column grid of .qa cards on desktop (one on phones) .qa one question: works on
(always open) and on
…

…

(accordion, no JS; chevron rotates when open) WHERE TO GET IT .get-cards 3-up grid of .get-card (h3 + p + link); .compare-cards is the same grid for 2–3 comparison-link cards COMPARISON LINKS .compare-links panel with a label and a wrapping row of link chips CONTACT .contact wide glass panel: text on the left, .ctas on the right FOOTER footer.site .foot-grid (brand column + up to 3 link columns, each .foot-col with an .eyebrow heading and a ul) and .foot-bar (© line). Legacy footers with

rows still read fine. --------------------------------------------------------------------------- */ html { background: #101016; } :root { /* surfaces (Pro Dark Glass tokens) */ --canvas: #101016; --surface: #131316; --low: #1b1b1e; --mid: #1f1f22; --high: #2a2a2d; --highest: #353438; /* ink */ --ink: #e5e1e6; --ink-2: #c0c6d6; --ink-3: #8b91a0; /* hairlines and glass fills */ --hair: rgba(255, 255, 255, 0.13); --hair-2: rgba(255, 255, 255, 0.2); --glass: rgba(255, 255, 255, 0.05); --glass-2: rgba(255, 255, 255, 0.09); --glass-3: rgba(255, 255, 255, 0.14); /* the glass recipe: a translucent pane, a lit top edge, a blurred backdrop */ --pane: linear-gradient(155deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.015) 100%); --pane-2: linear-gradient(155deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.045) 50%, rgba(255, 255, 255, 0.02) 100%); --blur: blur(22px) saturate(170%); --lip: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.045); /* ambient colour behind everything - glass needs something to refract */ --glow-1: rgba(62, 144, 255, 0.42); --glow-2: rgba(130, 110, 255, 0.34); --glow-3: rgba(80, 180, 255, 0.3); --shadow: 0 12px 32px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55); /* accent: company = optical blue */ --accent: #aac7ff; --accent-fill: #aac7ff; --on-accent: #003064; --accent-soft: rgba(62, 144, 255, 0.14); --accent-glow: rgba(62, 144, 255, 0.35); --accent-line: rgba(62, 144, 255, 0.4); --accent-2: #c2c1ff; /* shape */ --r-sm: 8px; --r: 16px; --r-md: 24px; --r-lg: 32px; /* measure */ --max: 1320px; --measure: 780px; --gutter: 16px; /* type */ --display: "Bricolage Grotesque", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color-scheme: dark; } [data-app="pocketboss"], .t-pocketboss, .accent-pocketboss { --glow-1: rgba(240, 182, 76, 0.42); --glow-2: rgba(255, 143, 96, 0.32); --glow-3: rgba(120, 130, 255, 0.30); --accent-2: #ffd9a0; --accent: #f0b64c; --accent-fill: #e5a93c; --on-accent: #1d1300; --accent-soft: rgba(229, 169, 60, 0.14); --accent-glow: rgba(229, 169, 60, 0.3); --accent-line: rgba(229, 169, 60, 0.4); } [data-app="mucknotes"], .t-mucknotes, .accent-mucknotes { --glow-1: rgba(71, 226, 102, 0.38); --glow-2: rgba(180, 230, 90, 0.30); --glow-3: rgba(60, 180, 200, 0.30); --accent-2: #bdf5a8; --accent: #4ade6b; --accent-fill: #30d158; --on-accent: #06200d; --accent-soft: rgba(48, 209, 88, 0.14); --accent-glow: rgba(48, 209, 88, 0.3); --accent-line: rgba(48, 209, 88, 0.4); } /* Commute Magic's accent is its own signal green (#4edea3 in the app's theme.ts), so the company page and the app agree on what the product looks like rather than inventing a fourth colour here. */ [data-app="commutemagic"], .t-commutemagic, .accent-commutemagic { --glow-1: rgba(16, 185, 129, 0.40); --glow-2: rgba(78, 222, 163, 0.28); --glow-3: rgba(70, 140, 220, 0.30); --accent-2: #bff3dc; --accent: #4edea3; --accent-fill: #10b981; --on-accent: #00291b; --accent-soft: rgba(16, 185, 129, 0.18); --accent-glow: rgba(78, 222, 163, 0.35); --accent-line: rgba(78, 222, 163, 0.4); } [data-app="almoner"], .t-almoner, .accent-almoner { --glow-1: rgba(214, 62, 82, 0.42); --glow-2: rgba(255, 120, 120, 0.30); --glow-3: rgba(150, 90, 220, 0.32); --accent-2: #ffb3bd; --accent: #ff6b86; --accent-fill: #d70035; --on-accent: #ffffff; --accent-soft: rgba(215, 0, 53, 0.18); --accent-glow: rgba(255, 55, 95, 0.35); --accent-line: rgba(255, 55, 95, 0.4); } /* ---------- base ---------- */ /* One ambient colour layer for the whole page. Fixed, so it bleeds into the empty margins and gives the glass something to refract. Hues per app above. */ body::before { content: ""; position: fixed; inset: -10% -5%; z-index: 0; pointer-events: none; background: radial-gradient(52rem 42rem at 6% -6%, var(--glow-1), transparent 62%), radial-gradient(48rem 40rem at 100% 16%, var(--glow-2), transparent 60%), radial-gradient(46rem 42rem at 42% 104%, var(--glow-3), transparent 62%); filter: blur(24px); } header.site, main, footer.site { position: relative; z-index: 1; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--canvas); overflow-x: clip; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent-fill); color: var(--on-accent); } img { max-width: 100%; height: auto; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: #ffffff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } strong { color: var(--ink); font-weight: 600; } code { font-family: var(--mono); font-size: 0.92em; background: var(--glass); padding: 1px 5px; border-radius: 4px; } hr { border: 0; border-top: 1px solid var(--hair); margin: 32px 0; } h1, h2, h3, h4 { color: var(--ink); font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -0.03em; font-optical-sizing: auto; } h4 { font-weight: 600; } h1 { font-size: 44px; line-height: 1.15; letter-spacing: -0.025em; margin: 6px 0 12px; } h2 { font-size: 34px; line-height: 1.2; margin: 48px 0 14px; } h3 { font-size: 21px; line-height: 1.3; letter-spacing: -0.025em; margin: 22px 0 6px; font-weight: 600; } p, li { margin: 0 0 12px; color: var(--ink-2); } p strong, li strong { color: var(--ink); } ul, ol { padding-left: 22px; } li { margin-bottom: 8px; } blockquote { margin: 12px 0; padding: 12px 18px; border-left: 3px solid var(--accent-fill); background: var(--glass); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); } /* ---------- layout ---------- */ /* clip, not hidden: stops a full-bleed band making a sideways scrollbar while leaving position:sticky working. */ body { overflow-x: clip; } /* A section that breaks out of the reading column and runs the full window width with its own tinted pane behind it. Put class="band" on a .section. */ .band { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 64px; margin-top: 56px; } /* Full bleed without overflow: a huge box-shadow spread paints past the element without adding to the page width (which -50vw does, scrollbar and all), and clip-path keeps the spill to the left and right only. */ .band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 100vmax rgba(255, 255, 255, 0.05); clip-path: inset(0 -100vmax); } .band.tint::before { background: var(--accent-soft); box-shadow: 0 0 0 100vmax var(--accent-soft); } .band + .band { margin-top: 0; } .container, main, header.site, footer.site { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } main { max-width: calc(var(--measure) + 2 * var(--gutter)); padding-bottom: 48px; } main.wide { max-width: var(--max); } main > :first-child { margin-top: 0; } .section { padding: 56px 0 0; } .section:first-child { padding-top: 24px; } .section-head { margin-bottom: 28px; } .section-head h2 { margin: 6px 0 10px; font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; } .section-head .lede-text { font-size: 17px; color: var(--ink-2); max-width: 60ch; margin: 0; } .section-head.center { text-align: center; } .section-head.center .lede-text { margin: 0 auto; } .eyebrow, .kick { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0; } .eyebrow.pill, .kick.pill { padding: 8px 16px; border-radius: 999px; background: rgba(42, 42, 45, 0.8); border: 1px solid var(--hair); box-shadow: 0 0 24px rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .eyebrow.pill::before, .kick.pill::before, .led { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 8px var(--accent-glow); flex: none; } .tagline { color: var(--ink-2); font-size: 18px; line-height: 1.5; margin: 0 0 18px; max-width: 62ch; } .note, .muted { color: var(--ink-3); font-size: 14px; } .note a { color: var(--accent); } .glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; width: 600px; height: 500px; top: -120px; left: 18%; background: var(--accent-glow); opacity: 0.35; filter: blur(140px); } .glow.b { top: 900px; left: auto; right: -80px; width: 500px; height: 450px; background: rgba(19, 156, 199, 0.35); } .glow.c { top: 1900px; left: -140px; width: 550px; height: 550px; background: rgba(54, 48, 191, 0.4); } .has-glow { position: relative; } .glow { display: none; } /* superseded by the page-wide ambient layer */ .has-glow > * { position: relative; z-index: 1; } .has-glow > .glow { position: absolute; z-index: 0; } /* ---------- nav ---------- */ header.site { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; max-width: none; padding: 12px var(--gutter); background: rgba(14, 14, 17, 0.8); border-bottom: 1px solid rgba(65, 71, 84, 0.3); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); margin-bottom: 0; } header.site .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -0.015em; margin-right: auto; } header.site .brand::before { content: ""; width: 34px; height: 34px; border-radius: 10px; flex: none; background: var(--high) radial-gradient(circle at 50% 40%, var(--accent-fill) 0 5px, transparent 6px); box-shadow: 0 0 20px var(--accent-soft), inset 0 1px 0 var(--hair-2); } header.site .brand:hover { color: #ffffff; } header.site nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(31, 31, 34, 0.7); border: 1px solid var(--hair); } header.site nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; line-height: 20px; padding: 6px 14px; border-radius: 999px; transition: color 150ms ease, background-color 150ms ease; } header.site nav a:hover { color: var(--ink); background: var(--glass-2); } header.site nav a[aria-current="page"] { color: var(--ink); background: var(--highest); font-weight: 500; } header.site .nav-side { display: flex; align-items: center; gap: 12px; font-size: 14px; } header.site .nav-side a { color: var(--ink-2); text-decoration: none; } header.site .nav-side a:hover { color: var(--ink); } header.site .nav-side .cta { padding: 8px 16px; min-height: 36px; font-size: 14px; } /* ---------- buttons ---------- */ .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; } .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 24px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); text-decoration: none; font-weight: 500; font-size: 15px; line-height: 22px; border: 1px solid transparent; box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: box-shadow 200ms ease, background-color 150ms ease, transform 150ms ease, color 150ms ease; } .cta:hover { color: var(--on-accent); box-shadow: 0 0 32px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35); filter: brightness(1.06); } .cta:active { transform: scale(0.98); } .cta.alt { background: var(--glass-2); color: var(--ink); border-color: var(--hair); box-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .cta.alt:hover { background: var(--glass-3); color: #ffffff; box-shadow: none; filter: none; } .cta.soft { background: var(--accent-soft); color: var(--accent); border-color: transparent; box-shadow: none; } .cta.soft:hover { background: var(--accent-glow); color: var(--ink); box-shadow: none; filter: none; } .cta.sm { min-height: 36px; padding: 6px 14px; font-size: 13px; line-height: 18px; } .cta.wide { width: 100%; justify-content: space-between; } .cta .arrow { font-size: 1.1em; line-height: 1; } /* ---------- section rhythm ---------- */ /* A lit rule between sections, so the page reads as chapters rather than one long scroll. Decorative only. */ .section + .section:not(.band)::before, .band + .section:not(.band)::before { content: ""; display: block; height: 1px; margin: 0 auto 56px; max-width: 420px; background: linear-gradient(90deg, transparent, var(--hair-2) 18%, var(--accent) 50%, var(--hair-2) 82%, transparent); opacity: .75; } /* Sections rise into place once, when they are first scrolled to. The class is added by a few lines of script; with no script, or with reduced motion, the content is simply visible. */ .reveal { opacity: 0; transform: translateY(26px); } .reveal.seen { opacity: 1; transform: none; transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.3,1); } .reveal.seen > * { animation: riseIn 700ms cubic-bezier(.2,.7,.3,1) both; } .reveal.seen > :nth-child(2) { animation-delay: 70ms; } .reveal.seen > :nth-child(3) { animation-delay: 140ms; } .reveal.seen > :nth-child(4) { animation-delay: 210ms; } @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.seen, .reveal.seen > * { opacity: 1; transform: none; animation: none; transition: none; } } /* ---------- headline colour ---------- */ /* Gradient lettering on the big headings. Guarded, so a browser without background-clip:text gets solid ink rather than invisible text. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { /* the company is the three apps, so its lettering carries all of them */ [data-app="company"] .hero h1, [data-app="company"] .section-head h2, [data-app="company"] .grad { background-image: linear-gradient(96deg, #ffffff 3%, #f5c26b 32%, #ff9fb0 58%, #8fe3a4 78%, #aac7ff 97%); } .hero h1, .section-head h2, .grad { background-image: linear-gradient(96deg, #ffffff 4%, var(--ink) 24%, var(--accent) 60%, var(--accent-2) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } } /* ---------- hero ---------- */ /* the app's own icon, above the name */ .hero-mark { width: 88px; height: 88px; border-radius: 22px; display: block; margin: 0 auto 20px; box-shadow: 0 0 0 1px var(--hair), 0 18px 44px rgba(0, 0, 0, .5), 0 0 70px var(--accent-soft); } .hero.left .hero-mark { margin-left: 0; } @media (min-width: 760px) { .hero-mark { width: 104px; height: 104px; border-radius: 26px; } } .hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0 24px; } .hero > .eyebrow { margin-bottom: 22px; } .hero h1 { font-size: clamp(42px, 6.4vw, 78px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; max-width: 17ch; margin: 0 0 18px; } .hero .hero-lede, .hero .tagline { font-size: 17px; line-height: 1.55; max-width: 60ch; margin: 0 auto 28px; } .hero .ctas { justify-content: center; margin: 0 0 36px; } .hero.left { align-items: flex-start; text-align: left; } .hero.left .hero-lede, .hero.left .tagline { margin-left: 0; } .hero.left .ctas { justify-content: flex-start; } .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 1040px; padding: 12px; border-radius: var(--r-md); background: rgba(27, 27, 30, 0.7); border: 1px solid var(--hair); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); text-align: left; } .stat { padding: 16px; border-radius: var(--r); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 6px; } .stat-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .stat-v { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); line-height: 1.3; } .stat-d { font-size: 13px; color: var(--ink-2); line-height: 1.4; } /* ---------- glass card primitives ---------- */ .card, .tier, .step, .qa, .lede, .callout, .contact, .compare-links, .get-card, .app, .compare-cards > * { position: relative; background: var(--pane); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--hair); box-shadow: var(--lip), 0 18px 44px rgba(0, 0, 0, 0.36); border-radius: var(--r-md); } .cards, .steps, .get-cards, .compare-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 8px 0; } .card, .step, .get-card, .compare-cards > * { padding: 24px; transition: background-color 200ms ease, box-shadow 200ms ease; } .card:hover, .step:hover, .get-card:hover { background: var(--pane-2); border-color: var(--hair-2); box-shadow: var(--lip), 0 22px 54px rgba(0, 0, 0, 0.42), 0 0 40px var(--accent-soft); } .card h3, .step h3, .get-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; } /* the title of a box carries the app's colour, so the grid is not a wall of white */ .card h3, .get-card h3 { color: var(--accent); } .card > .tag { margin-bottom: 12px; } .card > .tag + h3 { margin-top: 0; } .card:hover h3, .get-card:hover h3 { color: var(--accent-2); } /* Benefit bullets: an accent arrow, a hanging indent, no list bullets.

*/ .wins { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; } .wins li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--ink-2); } .wins li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; line-height: 1.5; } .wins.tight li { font-size: 14.5px; } .wins strong { color: var(--ink); font-weight: 600; } .card p, .step p, .get-card p { margin: 0; font-size: 15px; line-height: 1.55; } .card p + p, .step p + p, .get-card p + p { margin-top: 10px; } .card .idx, .step .idx, .app .idx { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 14px; } .card.span-2, .step.span-2 { grid-column: span 1; } .lede { padding: 22px 24px; margin: 24px 0; border-color: var(--accent-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 40px var(--accent-soft); } .lede h2, .lede h3 { margin: 0 0 8px; font-size: 22px; } .lede p { margin: 0; } .lede p + p { margin-top: 10px; } .lede.split { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; } .mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mini-stats .stat { padding: 12px; background: rgba(255, 255, 255, 0.045); } .mini-stats .stat-v { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; } .tier .badge { position: absolute; top: 20px; right: 20px; } .tier .badge.alt { background: var(--glass-3); color: var(--ink-2); } .callout { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; border-radius: var(--r); margin: 24px 0; } .callout::before { content: ""; width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--highest) radial-gradient(circle, var(--accent-fill) 0 4px, transparent 5px); } .callout p { margin: 0; font-size: 14px; flex: 1 1 260px; } .callout > a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-2); text-decoration: none; } .callout > a:hover { color: var(--ink); } /* ---------- app cards (company home) ---------- */ .apps { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 8px 0 24px; } .app { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px; overflow: hidden; transition: box-shadow 250ms ease; } .app::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45; background: linear-gradient(180deg, var(--accent-soft), transparent 45%); transition: opacity 250ms ease; } .app:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 40px var(--accent-soft); } .app:hover::before { opacity: 0.9; } .app > * { position: relative; } .app .app-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .app .idx { margin: 0; } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; } .app .app-title { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; } .app .app-icon { width: 44px; height: 44px; border-radius: 12px; flex: none; box-shadow: 0 0 0 1px var(--hair); } .app h3 { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; } .app > div > p { font-size: 15px; line-height: 1.55; margin: 0 0 18px; } .preview { position: relative; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 16px 20px; min-height: 330px; background: radial-gradient(70% 60% at 50% 12%, var(--accent-soft), transparent 70%), rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px var(--hair); } /* the whole screen, never a cropped strip of it */ .preview img { display: block; width: auto; height: 252px; max-width: 100%; object-fit: contain; border-radius: 18px; border: 5px solid rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .2), 0 18px 40px rgba(0, 0, 0, .5), 0 0 50px var(--accent-soft); transition: transform 500ms cubic-bezier(.2, .7, .3, 1); } .app:hover .preview img { transform: translateY(-6px) scale(1.03); } .preview figcaption { position: static; margin-top: 14px; padding: 0; max-width: 32ch; text-align: center; color: var(--ink-2); font-size: 13px; line-height: 1.45; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .app .links { display: flex; flex-direction: column; gap: 8px; margin: 0; } .app .links .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .app .links .row .cta { min-height: 36px; padding: 6px 10px; font-size: 12px; font-family: var(--mono); letter-spacing: 0.04em; text-align: center; } /* ---------- pricing ---------- */ .tiers { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 8px 0 16px; } .tier { padding: 24px; } .tier.paid { border-color: var(--accent-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 48px var(--accent-soft); } .tier .name { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .tier.paid .name { color: var(--accent); } .tier .amount { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin: 8px 0 2px; font-variant-numeric: tabular-nums; color: var(--ink); } .tier .per { color: var(--ink-3); font-size: 13px; margin-bottom: 14px; } .tier p { margin: 0 0 10px; font-size: 15px; } .tier ul { list-style: none; padding: 0; margin: 0; } .tier li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 15px; line-height: 1.5; } .tier li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .tier .ctas { margin: 18px 0 0; } .tier .cta { width: 100%; } /* ---------- comparison table ---------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 18px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--low); } table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; } th, td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--hair); color: var(--ink-2); } thead th { background: var(--mid); color: var(--accent); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; } tbody th { font-weight: 500; color: var(--ink); } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td, tbody tr:hover th { background: var(--glass); } td .yes { color: var(--accent); font-weight: 500; } td .no { color: var(--ink-3); } /* ---------- screenshots ---------- */ .shots { display: flex; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 14px; scroll-snap-type: x mandatory; margin: 8px 0 4px; } .shots figure { flex: 0 0 auto; width: 248px; margin: 0; scroll-snap-align: start; } .shots img { display: block; width: 100%; height: auto; border-radius: 30px; background: #0a0a0c; border: 8px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 70px var(--accent-soft); transition: transform 300ms ease, box-shadow 300ms ease; } .shots figure:hover img { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 34px 70px rgba(0, 0, 0, 0.6), 0 0 90px var(--accent-glow); } .shots figcaption { font-size: 13px; color: var(--ink-2); margin-top: 10px; line-height: 1.4; } .shots.grid { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; scroll-snap-type: none; } .shots.grid figure { width: auto; } .shots.wide figure { width: min(100%, 460px); } /* Inside a full-bleed band the phones get room: bigger, centred, alternating heights so the row reads as an arrangement rather than a filmstrip, and a soft reflection under each one. */ .band .shots { padding-bottom: 28px; } @media (min-width: 1000px) { .band .shots { justify-content: center; overflow: visible; scroll-snap-type: none; gap: 22px; } .band .shots figure { flex: 0 1 264px; width: auto; max-width: 264px; min-width: 0; transition: transform 380ms cubic-bezier(.2,.7,.3,1); } .band .shots figure:nth-child(even) { transform: translateY(26px); } .band .shots figure:hover { transform: translateY(-10px) scale(1.035); z-index: 3; } .band .shots figure:nth-child(even):hover { transform: translateY(16px) scale(1.035); } .band .shots figure::after { content: ""; display: block; height: 42px; margin: -6px 10px 0; background: radial-gradient(60% 100% at 50% 0%, var(--accent-glow), transparent 72%); filter: blur(10px); opacity: .5; pointer-events: none; } .band .shots.wide figure:nth-child(even) { transform: none; } .band .shots.wide figure:hover { transform: translateY(-8px) scale(1.02); } } @media (prefers-reduced-motion: reduce) { .band .shots figure, .shots figure:hover img { transition: none; } } .shots.wide img { border-radius: 14px; border-width: 4px; } /* ---------- versus: a difference you can see at a glance ----------
What mattersPocketBossJobber
PriceFree, or $14.99From $29 a month
Every "them" cell must come from that competitor's own vs/ page. */ .versus { border: 1px solid var(--hair); border-radius: var(--r-md); overflow: hidden; margin: 18px 0 8px; background: var(--pane); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--lip); } .vs-row { display: grid; grid-template-columns: 1fr; gap: 4px 18px; padding: 16px 20px; border-top: 1px solid var(--hair); } .vs-row:first-child { border-top: 0; } .vs-row > span:first-child { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .vs-row .us, .vs-row .them { font-size: 16.5px; line-height: 1.5; } .vs-row .us { color: var(--ink); font-weight: 500; position: relative; padding-left: 24px; } .vs-row .us::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; line-height: 1.5; } .vs-row .them { color: var(--ink-3); } .vs-head { background: rgba(255, 255, 255, 0.05); } .vs-head > span { font-family: var(--display) !important; font-size: 18px !important; font-weight: 700; letter-spacing: -.02em; color: var(--ink) !important; text-transform: none !important; } .vs-head > span:nth-child(2) { color: var(--accent) !important; } @media (min-width: 760px) { .vs-row { grid-template-columns: repeat(3, 1fr); align-items: baseline; } .vs-row > span:first-child { padding-top: 2px; } } /* A single number worth stopping on:

62% cheaper …

*/ .claim { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 0; font-size: 16px; color: var(--ink-2); } .claim b { font-family: var(--display); font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--accent); flex: none; } /* ---------- FAQ ---------- */ .qa { padding: 20px 24px; margin: 0 0 12px; transition: background-color 150ms ease; } .qa:hover { background: var(--pane-2); border-color: var(--hair-2); } .qa h3, .qa summary { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: var(--ink); } .qa p { margin: 0; font-size: 15px; line-height: 1.55; } .qa p + p { margin-top: 10px; } details.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; } details.qa summary::-webkit-details-marker { display: none; } details.qa summary::after { content: ""; width: 9px; height: 9px; flex: none; margin-right: 4px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 200ms ease; } details.qa[open] summary::after { transform: rotate(-135deg); } details.qa[open] summary { margin-bottom: 8px; } .faq .qa-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; } .faq .qa-grid .qa { margin: 0; } /* legacy FAQ markup: h3 followed by p, no wrapper — draw each pair as a card */ .faq > h3 { margin: 12px 0 0; padding: 18px 24px 4px; font-size: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.04) 100%), var(--low); border: 1px solid var(--hair); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; } .faq > h3 + p { margin: 0 0 12px; padding: 0 24px 18px; font-size: 15px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.025) 100%), var(--low); border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); } /* ---------- where to get it ---------- */ .get-card .eyebrow { margin-bottom: 8px; } .get-card a { overflow-wrap: anywhere; } /* ---------- comparison links ---------- */ .compare-links { padding: 20px 24px; border-radius: var(--r); margin: 24px 0; background: rgba(14, 14, 17, 0.6); } .compare-links .label, .compare-links .eyebrow { display: block; margin-bottom: 12px; color: var(--ink-3); } .compare-links .chips, .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips a { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(42, 42, 45, 0.85); border: 1px solid var(--hair); color: var(--ink-2); text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; transition: background-color 150ms ease, color 150ms ease; } .chips a:hover { background: var(--highest); color: var(--ink); } /* ---------- contact ---------- */ .contact { display: flex; flex-direction: column; gap: 20px; padding: 32px; margin: 24px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow-lg); } .contact h2 { margin: 6px 0 8px; font-size: 28px; } .contact p { margin: 0; } .contact .email { display: inline-block; margin-top: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--accent); } .contact .ctas { margin: 0; flex-direction: column; } .contact .ctas .cta { width: 100%; } /* ---------- footer ---------- */ footer.site { margin-top: 64px; padding-top: 40px; padding-bottom: 56px; border-top: 1px solid rgba(65, 71, 84, 0.3); color: var(--ink-2); font-size: 14px; } footer.site p { margin: 0 0 10px; } footer.site a { color: var(--ink-2); text-decoration: none; } footer.site a:hover { color: var(--ink); text-decoration: underline; } footer.site strong { color: var(--ink); } .foot-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; } .foot-col ul { list-style: none; padding: 0; margin: 0; } .foot-col li { margin: 0 0 8px; } .foot-col .eyebrow { display: block; margin-bottom: 14px; } .foot-brand .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; margin-bottom: 10px; } .foot-brand .brand::before { content: ""; width: 28px; height: 28px; border-radius: 8px; flex: none; background: var(--high) radial-gradient(circle at 50% 40%, var(--accent-fill) 0 4px, transparent 5px); box-shadow: inset 0 1px 0 var(--hair-2); } .foot-brand p { margin: 0; font-size: 13px; } .foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 20px; border-top: 1px solid rgba(65, 71, 84, 0.2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); } .foot-bar p { margin: 0; color: var(--ink-3); } /* ---------- long-form pages (FAQ page, vs pages) ---------- */ nav[aria-label="Sections"] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; } nav[aria-label="Sections"] li { margin: 0; } nav[aria-label="Sections"] a { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--hair); color: var(--ink-2); text-decoration: none; font-size: 14px; } nav[aria-label="Sections"] a:hover { color: var(--ink); background: var(--glass-3); } /* ---------- responsive ---------- */ @media (min-width: 640px) { h1 { font-size: 44px; } .hero h1 { font-size: 56px; line-height: 1.08; } .hero { padding: 56px 0 32px; } .cards, .steps, .get-cards, .tiers { grid-template-columns: repeat(2, 1fr); } .shots figure { width: 240px; } .shots.grid { grid-template-columns: repeat(3, 1fr); } .contact { flex-direction: row; align-items: center; justify-content: space-between; } .contact .ctas { flex-direction: row; } .contact .ctas .cta { width: auto; } .foot-grid { grid-template-columns: 1fr 1fr; } .section { padding-top: 80px; } } @media (min-width: 900px) { :root { --gutter: 32px; } h2 { font-size: 40px; line-height: 1.15; } .section-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .section-head.split .lede-text { max-width: 44ch; font-size: 15px; margin: 0 0 6px; } .cards, .steps { grid-template-columns: repeat(3, 1fr); } .cards.cols-2, .steps.cols-2 { grid-template-columns: repeat(2, 1fr); } .cards.cols-4, .steps.cols-4 { grid-template-columns: repeat(4, 1fr); } .card.span-2, .step.span-2 { grid-column: span 2; } .get-cards { grid-template-columns: repeat(3, 1fr); } .compare-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .lede.split { grid-template-columns: 1.2fr 1fr; gap: 32px; } .faq .qa-grid { grid-template-columns: repeat(2, 1fr); } .tiers.three { grid-template-columns: repeat(3, 1fr); } .apps { grid-template-columns: repeat(3, 1fr); } .stats { grid-template-columns: repeat(4, 1fr); padding: 16px; gap: 16px; } .shots figure { width: 260px; } .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .section { padding-top: 96px; } header.site { padding: 12px 40px; } } @media (min-width: 1200px) { :root { --gutter: 48px; } } /* ---------- motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .app:hover .preview img { transform: none; } } /* --------------------------------------------------------------- Almoner additions (promoted from the page after all three app pages landed): two-column hero, ledger preview panel, and 'how it is different' as full-width numbered rows. --------------------------------------------------------------- */ .hero-split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } .hero-split .hero { padding-bottom: 0; } .hero-split .hero .ctas { margin-bottom: 20px; } .hero-split .hero > p:last-child { font-size: 15px; color: var(--ink-3); margin: 0; } .ledger { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%), var(--low); border: 1px solid var(--accent-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 48px var(--accent-soft); border-radius: var(--r-md); padding: 20px; margin: 0; } .ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .ledger-head .l { color: var(--ink-3); } .ledger-head .r { color: var(--accent); } .ledger-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--ink-2); } .ledger-row b { font-weight: 400; color: var(--ink-2); } .ledger-row span { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-size: 14px; } .ledger-row.total { border-bottom: 0; padding-top: 14px; } .ledger-row.total b { color: var(--ink); font-weight: 500; } .ledger-row.total span { color: var(--accent); font-size: 19px; font-weight: 600; } .ledger-foot { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(14, 14, 17, 0.6); font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--ink-3); line-height: 1.6; } .lede.split .ledger { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* "How it is different" as full-width numbered rows, as the design draws them */ .steps.rows { grid-template-columns: 1fr; gap: 12px; } .steps.rows .step { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 22px; } .steps.rows .step .idx { margin: 0; line-height: 1.55; } @media (min-width: 1000px) { .hero-split { grid-template-columns: 1.15fr 1fr; gap: 40px; } }