51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1ca8,import { ArrowRight } from "lucide-react"; import type { ComponentProps, ReactNode } from "react"; import { cn } from "./lib/cn"; import { StageScope } from "./stage-scope"; import "./block-concept.css"; /** * Marketing blocks share one voice: monochrome from the system tokens, Geist * display with two-tone titles, ink actions, ruled sections and ember only for * focus. Blocks follow the page theme, and the Caliper UI controls inside them too. */ export type BlockAction = { label: string; href?: string; onClick?: () => void }; /** * A full-bleed band. The section is the container, so everything inside lays * out by the block's own width; `block-inner` holds the measure and rhythm. * `backdrop` paints behind the content edge to edge (grid lines, a tone). */ export function BlockRoot({ as: Tag = "section", width = "default", backdrop, tone, className, innerClassName, children, ...props }: Omit, "ref"> & { /** The band's element; a site footer is a footer. */ as?: "section" | "footer" | "div"; /** default 1240px · narrow 960px · wide 1440px. */ width?: "default" | "narrow" | "wide"; backdrop?: ReactNode; /** A band tone: the page colour or the sunken colour. */ tone?: "page" | "sunken" | "ink"; innerClassName?: string; }) { return ( {backdrop}

{children}

); } export function BlockEyebrow({ className, ...props }: ComponentProps<"p">) { return

; } /** A display heading in the block face. size 1 is the hero headline. */ export function BlockTitle({ as: Tag = "h2", size = 2, className, ...props }: ComponentProps<"h2"> & { as?: "h1" | "h2" | "h3"; size?: 1 | 2 | 3 }) { return ; } /** The second tone of a title: these words land in grey. */ export function BlockEm({ className, ...props }: ComponentProps<"em">) { return ; } export function BlockLead({ className, ...props }: ComponentProps<"p">) { return

; } /** * The section opening every block shares: eyebrow, title and lead. `split` * sets the lead beside the title on wide blocks; `center` stacks it centred. */ export function BlockHeader({ eyebrow, title, lead, align = "start", aside, headingLevel = 2, className, }: { eyebrow?: ReactNode; title: ReactNode; lead?: ReactNode; align?: "start" | "center" | "split"; /** 1 when the block opens the page, e.g. a pricing page. */ headingLevel?: 1 | 2; /** Sits at the end of the header row, e.g. a period toggle. */ aside?: ReactNode; className?: string; }) { return (

{eyebrow && {eyebrow}} {title}
{(lead || aside) && (
{lead && {lead}} {aside}
)}

); } export function BlockActions({ primary, secondary, className, block = false, }: { primary?: BlockAction; secondary?: BlockAction; className?: string; /** Full-width actions, e.g. on phones. */ block?: boolean; }) { if (!primary && !secondary) return null; return (
{primary && } {secondary && }
); } export function BlockButton({ action, kind = "primary", arrow = false }: { action: BlockAction; kind?: "primary" | "secondary"; arrow?: boolean }) { const shared = { "data-slot": "block-button", "data-kind": kind } as const; const content = ( <> {action.label} {arrow && } ); return action.href ? ( {content} ) : ( ); } export function BlockCard({ className, ...props }: ComponentProps<"div">) { return
; } export function BlockChip({ className, ...props }: ComponentProps<"span">) { return ; } /** * A product artefact on a stage: a dotted tonal panel holding a framed window, with an optional floating note that overlaps the * window's corner on wide blocks and sits beneath it on narrow ones. */ export function BlockStage({ title, floating, bare = false, className, children, }: { /** Shown in the window bar, e.g. "halden.app/close". */ title?: string; floating?: ReactNode; /** No window frame: the children bring their own surfaces. */ bare?: boolean; className?: string; children: ReactNode; }) { return (
{bare ? ( {children} ) : (

{title && {title}}

{children}

)} {floating &&
{floating}
}
); } /** Company names set as type in a quiet row; swap in SVG marks in production. */ export function BlockLogos({ label, logos, className }: { label?: string; logos: readonly string[]; className?: string }) { return (
{label &&
{label}
}
{logos.map((logo) => (
{logo}
))}

); } /** Initials from a name, in the block's highlight tones. */ export function BlockInitials({ name, size = 36, tone, className }: { name: string; size?: number; tone?: number; className?: string }) { const words = name.trim().split(/\s+/u); const initials = ((words[0]?.[0] ?? "") + (words.length > 1 ? (words[words.length - 1]?.[0] ?? "") : "")).toUpperCase(); return ( ); } export type BlockStat = { value: ReactNode; label: string }; 54:T3260,"use client"; import { Fragment, useId, useState, type ReactNode } from "react"; import { BlockButton, BlockChip, BlockHeader, BlockRoot, type BlockAction } from "./block-concept"; import { cn } from "./lib/cn"; import { RollingValue } from "./rolling-value"; import { SegmentedControl } from "./segmented-control"; import { Slider } from "./slider"; import "./shared/block-figure.css"; import "./pricing-block.css"; export type BlockPlan = { name: string; /** Monthly price per unit (seat, person, door). Omit for “Custom”. */ price?: number; /** Most units the plan allows. */ limit?: number; features: readonly string[]; action: BlockAction; /** One-time pricing: the line under the price, e.g. "once · launch price, then $159". */ note?: string; /** One-time pricing: the plan to set in ink. */ featured?: boolean; /** One-time pricing: who the plan is for, in one line under its name. */ audience?: string; /** One-time pricing: the regular price, struck through beside a launch price. */ compareAt?: number; /** One-time pricing: a short chip beside the name, e.g. "Launch price". */ badge?: string; /** One-time pricing: the line that opens the feature list, e.g. "Everything in Free, plus". */ includes?: string; }; /** A plan-by-plan comparison: groups of rows, one boolean per plan, in plan order. */ export type BlockPlanCompare = { groups: readonly { title: string; rows: readonly { label: string; values: readonly boolean[] }[] }[] }; /** Ruled rows under the plans; every cell says Included or Not included to a screen reader. */ function PlanCompare({ plans, compare, title }: { plans: readonly BlockPlan[]; compare: BlockPlanCompare; title: string }) { return (

{title}

{plans.map((plan) => )} {compare.groups.map((group) => ( {group.rows.map((row) => ( {plans.map((plan, index) => ( ))} ))} ))}

Feature {plan.name}

{group.title}
{row.label}

); } /** * Pricing explained by the buyer's own numbers. Enter seats (or people) and * each plan shows its total; the plan that fits is marked with the * reason, and totals roll in place when the period changes. * * `billing="once"` is for one-time licences: each plan shows its own price and * note, there is no seat slider or period toggle, and `featured` picks the * plan set in ink. `compare` adds a plan-by-plan table under the plans, and * `headingLevel={1}` lets the block open a pricing page. */ export function PricingBlock({ eyebrow, title, lead, plans, unit = "seat", units = { min: 1, max: 40, initial: 14 }, currency = "$", yearlyDiscount = 1 / 6, footnote, billing = "per-unit", compare, compareTitle = "Compare plans", headingLevel = 2, className, }: { eyebrow?: string; title: ReactNode; lead?: string; plans: readonly BlockPlan[]; unit?: string; units?: { min: number; max: number; initial: number; label?: string }; currency?: string; /** Share taken off when billed yearly; 1/6 means two months free. */ yearlyDiscount?: number; footnote?: ReactNode; billing?: "per-unit" | "once"; compare?: BlockPlanCompare; compareTitle?: string; headingLevel?: 1 | 2; className?: string; }) { const table = compare && ; if (billing === "once") return ; return ; } /** * One-time plans as one ruled sheet: the columns share rows, so names, prices, * buttons and the start of every feature list line up across plans, and the * featured plan is set in ink without lifting out of the sheet. On a phone the * plans stack, featured first. */ function OncePricing({ eyebrow, title, lead, plans, currency, footnote, headingLevel, table, className }: { eyebrow?: string; title: ReactNode; lead?: string; plans: readonly BlockPlan[]; currency: string; footnote?: ReactNode; headingLevel: 1 | 2; table?: ReactNode; className?: string }) { const money = (value: number) => `${currency}${Math.round(value).toLocaleString("en-US")}`; return (
{plans.map((plan) => (

{plan.name} {plan.badge && {plan.badge}}
{plan.audience &&
{plan.audience}
}

{plan.price === undefined ? "Custom" : money(plan.price)} {plan.compareAt !== undefined && plan.price !== undefined && plan.compareAt > plan.price && ( ~~Regular price {money(plan.compareAt)}~~ )}
{plan.note &&
{plan.note}
}

{plan.includes &&
{plan.includes}
}
{plan.features.map((feature) =>
{feature}
)}

))}
{footnote &&
{footnote}
} {table} ); } function UnitPricing({ eyebrow, title, lead, plans, unit, units, currency, yearlyDiscount, footnote, headingLevel, table, className, }: { eyebrow?: string; title: ReactNode; lead?: string; plans: readonly BlockPlan[]; unit: string; units: { min: number; max: number; initial: number; label?: string }; currency: string; yearlyDiscount: number; footnote?: ReactNode; headingLevel: 1 | 2; table?: ReactNode; className?: string; }) { const id = useId(); const [count, setCount] = useState(units.initial); const [period, setPeriod] = useState<"monthly" | "yearly">("monthly"); const factor = period === "yearly" ? 1 - yearlyDiscount : 1; const money = (value: number) => `${currency}${Math.round(value).toLocaleString("en-US")}`; const fits = (plan: BlockPlan) => plan.limit === undefined || count <= plan.limit; const recommended = plans.findIndex((plan) => plan.price !== undefined && fits(plan)); const reason = recommended < 0 ? `Above every plan's limit at ${count} ${unit}s. Talk to us.` : recommended === 0 ? `${plans[0].name} covers ${count} ${unit}${count === 1 ? "" : "s"}${plans[0].limit ? `; you would outgrow it at ${plans[0].limit + 1}` : ""}.` : `${count} ${unit}s is more than ${plans[recommended - 1].name} allows, so ${plans[recommended].name} fits.`; const periodToggle = ( setPeriod(value as "monthly" | "yearly")} options={[ { value: "monthly", label: "Monthly" }, { value: "yearly", label: `Yearly · −${Math.round(yearlyDiscount * 100)}%` }, ]} /> ); // The plans worked out from your own seat count. The plan that fits // inverts to ink and lifts; it moves as the count crosses a limit. return (
{units.label ?? `Team size`} {count} {unit}{count === 1 ? "" : "s"} setCount(Number(event.currentTarget.value))} />

{plans.map((plan, index) => { const available = fits(plan); const isRecommended = index === recommended; return (

{plan.name} For you

{plan.price === undefined ? "Custom" : available ? : "—"} {plan.price !== undefined && available && /mo} {plan.price === undefined ? "Custom pricing" : available ? `${money(plan.price * count * factor)} per month` : `Not available for ${count} ${unit}s`}
{plan.price === undefined ? "Talk to us" : available ? `${count} ${unit}s × ${money(plan.price * factor)}${period === "yearly" ? ", billed yearly" : ""}` : `Not available above ${plan.limit} ${unit}s`}

{plan.features.map((feature) =>
{feature}
)}

); })}

{reason}
{footnote &&
{footnote}
} {table} ); } 55:Te03,"use client"; import { useLayoutEffect, useRef, useState, type KeyboardEvent, } from "react"; import { cn } from "./lib/cn"; import "./shared/segmented-indicator.css"; import "./segmented-control.css"; export type SegmentedOption = { value: string; label: string }; export function SegmentedControl({ label, value, onValueChange, options, className, }: { label: string; value: string; onValueChange: (value: string) => void; options: readonly SegmentedOption[]; className?: string; }) { const group = useRef(null); const [initialValue] = useState(value); const [indicator, setIndicator] = useState<{ left: number; top: number; width: number; height: number; } | null>(null); useLayoutEffect(() => { const element = group.current; if (!element) return; const measure = () => { const active = element.querySelector('[aria-checked="true"]'); setIndicator( active ? { left: active.offsetLeft, top: active.offsetTop, width: active.offsetWidth, height: active.offsetHeight, } : null, ); }; measure(); const resize = new ResizeObserver(measure); resize.observe(element); element .querySelectorAll('[role="radio"]') .forEach((item) => resize.observe(item)); return () => resize.disconnect(); }, [value, options]); function move(event: KeyboardEvent) { const index = options.findIndex((item) => item.value === value); const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? (index + 1) % options.length : event.key === "ArrowLeft" || event.key === "ArrowUp" ? (index - 1 + options.length) % options.length : -1; if (next < 0) return; event.preventDefault(); onValueChange(options[next].value); group.current ?.querySelectorAll('[role="radio"]') [next]?.focus(); } return (
{indicator && ( )} {options.map((option) => { const selected = option.value === value; return ( ); })}
); } 56:T4a2,"use client"; import { useImperativeHandle, useLayoutEffect, useRef, type ComponentProps } from "react"; import "./slider.css"; export type SliderProps = Omit, "type">; /** * A native range input with an ink fill that tracks the value and a raised * thumb that grows slightly while dragged. Pair it with a number field when * people need exact entry. */ export function Slider({ ref, onInput, ...props }: SliderProps) { const input = useRef(null); useImperativeHandle(ref, () => input.current!, []); function sync() { const element = input.current; if (!element) return; const min = Number(element.min || 0); const max = Number(element.max || 100); const ratio = max > min ? (Number(element.value) - min) / (max - min) : 0; element.style.setProperty("--fill", `${Math.min(1, Math.max(0, ratio)) * 100}%`); } // Controlled values change without an input event; resync every render. useLayoutEffect(sync); return ( { sync(); onInput?.(event); }} /> ); } 57:T2ac6,/* block-concept.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* A site header used outside a block still needs the block tokens. */ [data-slot="block"] { --k-display-font: var(--font-display-block, var(--font-sans, system-ui, sans-serif)); --k-display-weight: 700; --k-display-case: none; --k-display-track: -0.03em; --k-display-stretch: normal; --k-display-lh: 1.04; /* Monochrome, from the system tokens, so blocks follow the page theme. */ --k-bg: var(--background, #fff); --k-surface: var(--elevated, #fff); --k-sunken: var(--surface, #f7f7f8); --k-ink: var(--foreground, #18181b); --k-muted: var(--muted-foreground, #5d5d66); --k-line: var(--border, #e4e4e8); --k-line-strong: color-mix(in oklab, var(--border-strong, #8a8a94) 55%, var(--k-line)); /* The grey second line of a two-tone title; 3:1 or better as large text in both themes. */ --k-faint: color-mix(in oklab, var(--k-muted) 70%, var(--k-bg)); --k-accent: var(--k-ink); --k-accent-ink: var(--k-bg); --k-hi: var(--k-ink); --k-hi-soft: var(--k-sunken); --k-focus: var(--brand, #bb4400); --k-danger: var(--danger, #c2272d); --k-stage: var(--surface, #f7f7f8); --k-stage-dot: color-mix(in oklab, var(--k-ink) 14%, var(--k-stage)); --k-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 14px 30px -16px rgb(0 0 0 / 24%), 0 40px 80px -48px rgb(0 0 0 / 32%); --k-radius: 10px; --k-radius-lg: 14px; --k-radius-xl: 18px; --k-btn-radius: 10px; --k-tile-1: color-mix(in oklab, var(--k-ink) 5%, var(--k-bg)); --k-tile-2: color-mix(in oklab, var(--k-ink) 8%, var(--k-bg)); --k-tile-3: color-mix(in oklab, var(--k-ink) 11%, var(--k-bg)); --k-tile-4: color-mix(in oklab, var(--k-ink) 14%, var(--k-bg)); background: var(--k-bg); color: var(--k-ink); font-family: var(--font-sans, system-ui, sans-serif); } /* Band tones inside a concept: a sunken band, or an inverse ink band. */ [data-slot="block"][data-tone="sunken"] { background: var(--k-sunken); } [data-slot="block-inner"] { position: relative; z-index: 1; margin-inline: auto; max-inline-size: 1240px; padding-inline: clamp(20px, 5cqi, 64px); padding-block: clamp(64px, 10cqi, 128px); } [data-slot="block-inner"][data-width="narrow"] { max-inline-size: 960px; } [data-slot="block-inner"][data-width="wide"] { max-inline-size: 1440px; } /* ── Type ─────────────────────────────────────────── */ [data-slot="block-eyebrow"] { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-mono, monospace); font-size: 13px; line-height: 18px; color: var(--k-muted); } [data-slot="block-title"] { margin: 0; font-family: var(--k-display-font); font-weight: var(--k-display-weight); font-stretch: var(--k-display-stretch); font-variation-settings: "wdth" var(--k-display-wdth, 100); text-transform: var(--k-display-case); letter-spacing: var(--k-display-track); font-optical-sizing: auto; text-wrap: balance; color: var(--k-ink); } [data-slot="block-title"][data-size="1"] { font-size: clamp(38px, 4.4cqi, 64px); line-height: 1.08; font-weight: 900; letter-spacing: -0.04em; } [data-slot="block-title"][data-size="2"] { font-size: clamp(30px, 3cqi, 42px); line-height: var(--k-display-lh); } [data-slot="block-title"][data-size="3"] { font-size: clamp(19px, 1.7cqi, 22px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; } /* Two-tone titles: the emphasised words land in grey. */ [data-slot="block-em"] { font-style: normal; color: var(--k-faint); } [data-slot="block-lead"] { margin: 0; max-width: 50ch; font-size: clamp(16px, 1.3cqi, 18px); line-height: 1.6; color: var(--k-muted); text-wrap: pretty; } /* The shared section opening. */ [data-slot="block-header"] { display: grid; gap: 20px 48px; margin-bottom: clamp(36px, 5cqi, 64px); } [data-slot="block-header-title"] { display: grid; gap: 18px; justify-items: start; } [data-slot="block-header-aside"] { display: grid; gap: 16px; align-content: end; justify-items: start; } [data-slot="block-header"][data-align="center"] { justify-items: center; text-align: center; } [data-slot="block-header"][data-align="center"] :is([data-slot="block-header-title"], [data-slot="block-header-aside"]) { justify-items: center; } [data-slot="block-header"][data-align="center"] [data-slot="block-title"] { max-width: 18ch; } @container (min-width: 900px) { [data-slot="block-header"][data-align="split"] { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; } [data-slot="block-header"][data-align="split"] [data-slot="block-header-aside"] { justify-items: start; padding-bottom: 6px; } } /* ── Buttons ──────────────────────────────────────── */ [data-slot="block-button"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--k-btn-radius); font: 500 14px/1 var(--font-sans, system-ui, sans-serif); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), translate var(--duration-normal) var(--ease-settle); } [data-slot="block-button"][data-kind="primary"] { background: var(--k-accent); color: var(--k-accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 1px 2px rgb(0 0 0 / 20%); } [data-slot="block-button"][data-kind="secondary"] { background: color-mix(in srgb, var(--k-surface) 60%, transparent); color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-line-strong); } [data-slot="block-button-arrow"] { transition: translate var(--duration-normal) var(--ease-settle); } @media (hover: hover) { [data-slot="block-button"][data-kind="primary"]:hover { background: color-mix(in srgb, var(--k-accent) 86%, var(--k-bg)); } [data-slot="block-button"][data-kind="secondary"]:hover { background: var(--k-sunken); box-shadow: inset 0 0 0 1px var(--k-ink); } [data-slot="block-button"]:hover [data-slot="block-button-arrow"] { translate: 3px 0; } } [data-slot="block-button"]:active { translate: 0 var(--motion-press-travel); } [data-slot="block-button"]:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 3px; } [data-slot="block-card"] { border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line); } [data-slot="block-chip"] { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--k-hi-soft); color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-line); text-decoration: none; } [data-slot="block-initials"] { display: inline-grid; flex: none; place-items: center; border-radius: 10px; font-weight: 600; background: var(--k-hi-soft); color: var(--k-hi); } [data-slot="block-initials"][data-tone="1"] { background: var(--k-tile-1); color: var(--k-ink); } [data-slot="block-initials"][data-tone="2"] { background: var(--k-tile-2); color: var(--k-ink); } [data-slot="block-initials"][data-tone="3"] { background: var(--k-tile-3); color: var(--k-ink); } /* ── Stage: a product artefact framed on a tonal panel ─ */ [data-slot="block-stage"] { position: relative; padding: clamp(14px, 4.5cqi, 64px); padding-bottom: 0; border-radius: var(--k-radius-xl); background-color: var(--k-stage); background-image: radial-gradient(var(--k-stage-dot) 1px, transparent 1.2px); background-size: 16px 16px; box-shadow: inset 0 0 0 1px var(--k-line); overflow: hidden; } [data-slot="block-window"] { position: relative; overflow: hidden; border-radius: var(--k-radius-lg) var(--k-radius-lg) 0 0; background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line), var(--k-shadow); } [data-slot="block-window-bar"] { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--k-line); background: color-mix(in srgb, var(--k-sunken) 55%, var(--k-surface)); } [data-slot="block-window-dots"] { display: none; } [data-slot="block-window-dots"] i { width: 10px; height: 10px; border-radius: 999px; background: var(--k-line-strong); } [data-slot="block-window-title"] { flex: 1 1 0; min-width: 0; width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--k-muted); } [data-slot="block-window-body"] { padding: clamp(14px, 2.6cqi, 28px); } [data-slot="block-float"] { position: relative; z-index: 2; margin: 12px 0 14px; } @container (min-width: 760px) { /* Over the window bar's empty right end, so it never hides a row. */ [data-slot="block-float"] { position: absolute; top: clamp(12px, 2.4cqi, 36px); right: clamp(12px, 2.4cqi, 36px); margin: 0; max-width: 320px; } } [data-slot="block-float"] > * { border-radius: var(--k-radius); background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line), var(--k-shadow); } /* ── Logos ────────────────────────────────────────── */ [data-slot="block-logos"] { display: grid; gap: 18px; } [data-slot="block-logos-label"] { margin: 0; font-size: 13px; color: var(--k-muted); } [data-slot="block-logos"] ul { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(24px, 4.5cqi, 56px); margin: 0; padding: 0; list-style: none; } [data-slot="block-logos"] li { font-family: var(--k-display-font); font-weight: var(--k-display-weight); font-stretch: var(--k-display-stretch); text-transform: var(--k-display-case); font-size: clamp(18px, 2cqi, 24px); letter-spacing: calc(var(--k-display-track) / 2); color: var(--k-muted); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { [data-slot="block-button"], [data-slot="block-button-arrow"] { transition: none; } [data-slot="block-button"]:active { translate: none; } [data-slot="block-button"]:hover [data-slot="block-button-arrow"] { translate: none; } } @media print { footer[data-slot="block"] { display: none !important; } [data-slot="block"] { background: #fff; } } } 58:T18f8,/* pricing-block.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* Checked feature lists. */ [data-slot="block-checks"] { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; } [data-slot="block-checks"] li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; } [data-slot="block-checks"] li::before { content: ""; width: 18px; height: 18px; margin-top: 1px; border-radius: 999px; background: currentColor; opacity: 0.85; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; } /* Pricing: the recommended plan inverts; the swap eases. */ [data-slot="block-plan"] { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: clamp(22px, 2.6cqi, 32px); border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line); transition: background-color var(--duration-deliberate) var(--ease-out), color var(--duration-deliberate) var(--ease-out), box-shadow var(--duration-deliberate) var(--ease-out), translate var(--duration-deliberate) var(--ease-settle); } [data-slot="block-plan"] [data-slot="block-title"] { color: inherit; } [data-slot="block-plan"][data-featured] { background: var(--k-ink); color: var(--k-bg); box-shadow: 0 0 0 1px var(--k-ink), var(--k-shadow); --k-muted: color-mix(in srgb, var(--k-bg) 72%, var(--k-ink)); --k-line: color-mix(in srgb, var(--k-bg) 16%, var(--k-ink)); } @container (min-width: 760px) { [data-slot="block-plan"][data-featured] { translate: 0 -8px; } } [data-slot="block-plan"][data-featured] [data-slot="block-figure"] { color: inherit; } [data-slot="block-plan"][data-featured] [data-slot="block-button"][data-kind="primary"] { background: var(--k-bg); color: var(--k-ink); } [data-slot="block-plan"][data-featured] [data-slot="block-chip"] { background: var(--k-bg); color: var(--k-ink); } /* One-time plans: one ruled sheet whose columns share rows (subgrid), so names, prices, buttons and lists align; the featured column is ink, flush in the sheet. */ [data-slot="plan-sheet"] { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line); } [data-slot="plan-column"] { display: grid; align-content: start; gap: 22px; min-width: 0; padding: clamp(24px, 2.8cqi, 36px); } [data-slot="plan-column"] + [data-slot="plan-column"] { box-shadow: inset 0 1px 0 var(--k-line); } [data-slot="plan-column"][data-featured] { order: -1; background: var(--k-ink); color: var(--k-bg); --k-muted: color-mix(in srgb, var(--k-bg) 72%, var(--k-ink)); --k-line: color-mix(in srgb, var(--k-bg) 18%, var(--k-ink)); box-shadow: none; } @container (min-width: 760px) { [data-slot="plan-sheet"] { grid-template-columns: repeat(var(--plans), minmax(0, 1fr)); grid-template-rows: repeat(4, auto); } [data-slot="plan-column"] { grid-row: span 4; grid-template-rows: subgrid; order: 0; } [data-slot="plan-column"][data-featured] { order: 0; } [data-slot="plan-column"] + [data-slot="plan-column"] { box-shadow: inset 1px 0 0 var(--k-line); } [data-slot="plan-column"][data-featured] + [data-slot="plan-column"], [data-slot="plan-column"][data-featured] { box-shadow: none; } } [data-slot="plan-head"], [data-slot="plan-price"] { display: grid; align-content: start; gap: 6px; } [data-slot="plan-was"] { font-size: clamp(18px, 1.6cqi, 22px); font-weight: 500; color: var(--k-muted); text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; } [data-slot="plan-action"] { align-self: start; } [data-slot="plan-features"] { display: grid; align-content: start; gap: 14px; padding-top: 22px; border-top: 1px solid var(--k-line); } [data-slot="plan-includes"] { font-size: 13px; line-height: 18px; font-weight: 600; } [data-slot="plan-column"][data-featured] [data-slot="block-figure"] { color: inherit; } [data-slot="plan-column"][data-featured] [data-slot="block-button"][data-kind="primary"] { background: var(--k-bg); color: var(--k-ink); } [data-slot="plan-column"][data-featured] [data-slot="block-chip"] { background: var(--k-bg); color: var(--k-ink); } /* Plan comparison: ruled rows, a 2px ink rule on top, ink marks for included. */ [data-slot="plan-compare"] table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; border-top: 2px solid var(--k-ink); } [data-slot="plan-compare"] th, [data-slot="plan-compare"] td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--k-line); text-align: left; font-weight: 400; } [data-slot="plan-compare"] thead th { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--k-muted); } [data-slot="plan-compare"] thead th[data-featured] { color: var(--k-ink); font-weight: 500; } [data-slot="plan-compare"] :is(thead th, td):not(:first-child) { width: 18%; text-align: center; padding-right: 0; } [data-slot="plan-compare-group"] th { padding-top: 26px; font-weight: 600; color: var(--k-ink); } [data-slot="plan-compare"] tbody th[scope="row"] { color: var(--k-ink); } [data-slot="plan-compare-mark"] { display: inline-block; width: 10px; height: 2px; border-radius: 1px; background: var(--k-line-strong); vertical-align: middle; } [data-slot="plan-compare"] td[data-included] [data-slot="plan-compare-mark"] { width: 16px; height: 16px; background: var(--k-ink); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; } [data-slot="plan-compare"] [role="region"]:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; } [data-slot="block-footnote"] a { color: var(--k-ink); text-decoration: underline; text-underline-offset: 3px; } @media (prefers-reduced-motion: reduce) { [data-slot="block-plan"] { transition: none; } } } 59:Tce9,/* slider.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="slider"] { display: block; width: 100%; min-width: 0; height: var(--control-height); margin: 0; appearance: none; background: transparent; border-radius: var(--radius-control); outline: none; cursor: pointer; touch-action: manipulation; } [data-slot="slider"]:disabled { cursor: not-allowed; opacity: 0.6; } [data-slot="slider"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient( to right, var(--accent) 0 var(--fill, 50%), color-mix(in srgb, var(--border-strong) 45%, var(--sunken)) var(--fill, 50%) 100% ); box-shadow: inset 0 1px 1px rgb(20 20 28 / 12%); } [data-slot="slider"]::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--border-strong) 45%, var(--sunken)); } [data-slot="slider"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); } [data-slot="slider"]::-webkit-slider-thumb { box-sizing: border-box; width: 20px; height: 20px; margin-top: -8px; appearance: none; border: 0; border-radius: 50%; background: var(--raised); box-shadow: var(--shadow-raised); transition: transform 200ms var(--ease-settle); } [data-slot="slider"]::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--raised); box-shadow: var(--shadow-raised); transition: transform 200ms var(--ease-settle); } [data-theme="dark"] [data-slot="slider"]::-webkit-slider-thumb, :root[data-theme="dark"] [data-slot="slider"]::-webkit-slider-thumb { background: var(--foreground); } [data-theme="dark"] [data-slot="slider"]::-moz-range-thumb { background: var(--foreground); } [data-slot="slider"]:active:not(:disabled)::-webkit-slider-thumb { transform: scale(1.12); } [data-slot="slider"]:active:not(:disabled)::-moz-range-thumb { transform: scale(1.12); } [data-slot="slider"]:focus-visible { outline: none; } [data-slot="slider"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot="slider"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--ring); outline-offset: 2px; } @media (forced-colors: active) { [data-slot="slider"]:focus-visible { outline-color: Highlight; } [data-slot="slider"] { forced-color-adjust: none; } [data-slot="slider"]::-webkit-slider-runnable-track { background: CanvasText; } [data-slot="slider"]::-moz-range-track { background: CanvasText; } [data-slot="slider"]::-webkit-slider-thumb { background: CanvasText; border-color: Canvas; } [data-slot="slider"]::-moz-range-thumb { background: CanvasText; border-color: Canvas; } } @media (prefers-reduced-motion: reduce) { [data-slot="slider"]::-webkit-slider-thumb { transition: none; } [data-slot="slider"]:active::-webkit-slider-thumb { transform: none; } } } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L51",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/block-concept.tsx","content":"$53","type":"registry:ui","target":"components/ui/block-concept.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/pricing-block.tsx","content":"$54","type":"registry:ui","target":"components/ui/pricing-block.tsx"},{"path":"ui/rolling-value.tsx","content":"\"use client\";\n\nimport { useState } from \"react\";\nimport \"./rolling-value.css\";\n\nexport function RollingValue({\n value,\n direction,\n}: {\n value: string;\n direction: \"up\" | \"down\" | \"none\";\n}) {\n const [frame, setFrame] = useState({ value, prior: value });\n if (frame.value !== value) setFrame({ value, prior: frame.value });\n const prior = frame.prior;\n const glyphs = [...value];\n\n return (\n \n {glyphs.map((glyph, index) => {\n const changed = prior.length !== glyphs.length || prior[index] !== glyph;\n return (\n \n \n {glyph === \" \" ? \"\\u00A0\" : glyph}\n \n \n );\n })}\n \n );\n}\n","type":"registry:ui","target":"components/ui/rolling-value.tsx"},{"path":"ui/segmented-control.tsx","content":"$55","type":"registry:ui","target":"components/ui/segmented-control.tsx"},{"path":"ui/slider.tsx","content":"$56","type":"registry:ui","target":"components/ui/slider.tsx"},{"path":"ui/stage-scope.tsx","content":"\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\n\n/**\n * True inside a block stage: a frame shown there is a demonstration on a page\n * that already has its own main landmark, so it should not add a second one.\n */\nconst InStage = createContext(false);\n\nexport function StageScope({ children }: { children: ReactNode }) {\n return {children};\n}\n\nexport const useInStage = () => useContext(InStage);\n","type":"registry:ui","target":"components/ui/stage-scope.tsx"},{"path":"ui/block-concept.css","content":"$57","type":"registry:file","target":"components/ui/block-concept.css"},{"path":"ui/shared/block-figure.css","content":"/* Shared by about-template.tsx, feature-rows-block.tsx, hero-block.tsx, pricing-block.tsx, proof-block.tsx, steps-block.tsx, testimonials-block.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"block-figure\"] {\n font-family: var(--k-display-font);\n font-weight: var(--k-display-weight);\n font-stretch: var(--k-display-stretch);\n font-variation-settings: \"wdth\" var(--k-display-wdth, 100);\n letter-spacing: var(--k-display-track);\n font-variant-numeric: tabular-nums;\n line-height: 0.9;\n font-size: clamp(48px, 7cqi, 96px);\n color: var(--k-ink);\n }\n [data-slot=\"block-figure\"][data-size=\"xl\"] { font-size: clamp(72px, 13cqi, 176px); line-height: 0.85; }\n [data-slot=\"block-figure\"][data-size=\"sm\"] { font-size: clamp(36px, 4.4cqi, 56px); }\n}\n","type":"registry:file","target":"components/ui/shared/block-figure.css"},{"path":"ui/pricing-block.css","content":"$58","type":"registry:file","target":"components/ui/pricing-block.css"},{"path":"ui/rolling-value.css","content":"/* rolling-value.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"number-digit\"][data-direction=\"up\"] {\n animation: caliper-digit-in var(--duration-travel) var(--ease-showcase);\n }\n [data-slot=\"number-digit\"][data-direction=\"down\"] {\n animation: caliper-digit-down var(--duration-travel) var(--ease-showcase);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"number-digit\"][data-direction=\"up\"] {\n animation: caliper-digit-in 400ms var(--ease-showcase);\n }\n [data-slot=\"number-digit\"][data-direction=\"down\"] {\n animation: caliper-digit-down 400ms var(--ease-showcase);\n }\n }\n}\n\n@keyframes caliper-digit-down {\n from {\n transform: translateY(70%);\n }\n to {\n transform: translateY(0);\n }\n}\n","type":"registry:file","target":"components/ui/rolling-value.css"},{"path":"ui/shared/segmented-indicator.css","content":"/* Shared by billing-toggle.tsx, segmented-control.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n /* Segmented control: one raised plate travels to the choice on the settle\n curve and stretches 7% toward it mid-flight, so selection reads as one\n object moving. Labels and the value change at once. */\n [data-slot=\"segmented-indicator\"] {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n pointer-events: none;\n transition:\n transform 320ms var(--ease-settle),\n width 320ms var(--ease-settle);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"segmented-indicator\"] {\n transition: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/segmented-indicator.css"},{"path":"ui/segmented-control.css","content":"/* segmented-control.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"segmented-plate\"] {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 9px;\n background: var(--raised);\n box-shadow: var(--shadow-plate);\n }\n [data-slot=\"segmented-plate\"][data-moved=\"true\"] {\n animation: caliper-plate-stretch 320ms var(--ease-out);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"segmented-plate\"] {\n transition: none;\n }\n [data-slot=\"segmented-plate\"][data-moved=\"true\"] {\n animation: none;\n }\n }\n @keyframes caliper-plate-stretch {\n 40% {\n transform: scaleX(1.07);\n }\n }\n}\n","type":"registry:file","target":"components/ui/segmented-control.css"},{"path":"ui/slider.css","content":"$59","type":"registry:file","target":"components/ui/slider.css"}],"className":"h-[70svh] min-h-80"}]]}]