@layer components{.builds{display: grid;gap: var(--space-l)}@media (min-width: 64rem){.builds{grid-template-columns: repeat(12,minmax(0,1fr));align-items: start}.builds > .build{grid-column: 1 / -1}.builds > .build--a{grid-column: span 7}.builds > .build--b{grid-column: span 5}}.build .build__core{display: grid;gap: var(--space-m);padding: var(--space-xs)}@container (min-width: 60rem){.build--wide .build__core{grid-template-columns: minmax(0,5fr) minmax(0,6fr);align-items: center;column-gap: var(--space-xl);padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-xl)}}.build__text{display: grid;gap: var(--space-s);justify-items: start;align-content: start;padding: var(--space-s) var(--space-xs) var(--space-xs)}.build--wide .shot{order: -1}@container (min-width: 60rem){.build--wide .build__text{padding: var(--space-l) 0}.build--wide .shot{order: 0}}.build__meta{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-xs)}.build__kind{color: var(--c-bone-3);max-inline-size: none}.build__name{font-family: var(--font-display);font-weight: 400;font-size: var(--step-5);line-height: 1;letter-spacing: var(--tracking-heading);text-wrap: balance}.build:not(.build--wide) .build__name{font-size: var(--step-4)}.build__name a{color: var(--c-bone);text-decoration: none;transition: color var(--dur-hover) var(--ease-out-soft)}@media (hover: hover){.build__name a:hover{color: var(--c-lilac)}}.build__name a:active{color: var(--c-lilac)}.build__client{font-family: var(--font-ui);font-size: var(--step--1);color: var(--c-bone-2);max-inline-size: none}.build__client strong{color: var(--c-bone)}.build__line{color: var(--c-bone-2);max-inline-size: calc(46 * var(--ch-body));text-wrap: pretty}.build__note{font-size: var(--step--2);line-height: 1.5;color: var(--c-bone-3);max-inline-size: calc(52 * var(--ch-body))}.build__go .icon{inline-size: 0.875rem;block-size: 0.875rem}.specs{container-type: inline-size;inline-size: 100%;display: grid;grid-template-columns: repeat(2,minmax(0,1fr));column-gap: var(--space-s);margin: 0}.specs > div{position: relative;display: grid;gap: 0.25rem;align-content: start;padding-block: 0.75rem 0.25rem;min-inline-size: 0}.specs > div::before{content: "";position: absolute;inset-inline: 0;inset-block-start: 0;block-size: 1px;background: linear-gradient(90deg,var(--edge-violet),var(--edge-faint) 70%,transparent)}.specs dt{font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: var(--tracking-label);text-transform: uppercase;color: var(--c-bone-3)}.specs dd{margin: 0;font-family: var(--font-ui);font-weight: var(--weight-medium);font-size: var(--step-0);letter-spacing: -0.015em;color: var(--c-bone)}@media (min-width: 40rem){.specs--four{grid-template-columns: repeat(4,minmax(0,1fr))}}.shot{display: grid;gap: var(--space-xs);margin: 0;min-inline-size: 0}.shot__pane{display: none}.shot__pane:first-child{display: block}@supports selector(:has(*)){.shot:has(.shot__pick) .shot__pane:first-child{display: none}.shot:has(.shot__pick label:nth-of-type(1) input:checked) .shot__pane:nth-child(1),.shot:has(.shot__pick label:nth-of-type(2) input:checked) .shot__pane:nth-child(2),.shot:has(.shot__pick label:nth-of-type(3) input:checked) .shot__pane:nth-child(3),.shot:has(.shot__pick label:nth-of-type(4) input:checked) .shot__pane:nth-child(4){display: block}}@supports not selector(:has(*)){.shot__pick{display: none}}@media (prefers-reduced-motion: no-preference){.shot:focus-within .shot__pane{transition: opacity var(--dur-swap) var(--ease-out-soft)}@starting-style{.shot:focus-within .shot__pane{opacity: 0}}}.shot__pane img{display: block;inline-size: 100%;block-size: auto}.shot figcaption{font-size: var(--step--2);line-height: 1.5;color: var(--c-bone-3);max-inline-size: none}.shot figcaption a{color: var(--c-bone-2);text-decoration: underline;text-decoration-color: color-mix(in oklch,var(--c-lilac) 45%,transparent);text-underline-offset: 0.2em}.shot figcaption a:hover{color: var(--c-lilac)}.shot__frame{overflow: hidden;border-radius: calc(var(--radius-xl) - var(--bezel) - 0.375rem);background: var(--c-sunken);box-shadow: inset 0 0 0 1px var(--edge-faint),var(--shadow-float)}.shot__bar{display: flex;align-items: center;gap: 0.875rem;padding: 0.625rem 0.875rem;background: var(--c-raised-2);box-shadow: inset 0 -1px 0 var(--edge-faint)}.shot__dots{display: flex;gap: 0.375rem;flex: none}.shot__dots i{inline-size: 0.5rem;block-size: 0.5rem;border-radius: 50%;background: var(--c-raised-3);box-shadow: inset 0 0 0 1px var(--edge)}.shot__url{flex: 1;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-family: var(--font-mono);font-size: 0.6875rem;letter-spacing: 0.04em;color: var(--c-bone-3);text-align: center;padding-inline-end: 2.125rem}.shot__panes{aspect-ratio: 16 / 10;background: var(--c-sunken)}.shot--phone{justify-items: center}.shot--phone .shot__pick{justify-self: center}.shot__handset{position: relative;inline-size: min(100%,15rem);padding: 1.625rem 0.5rem 0;border-radius: 2rem 2rem 0 0;background: var(--c-raised-3);box-shadow: inset 0 0 0 1px var(--edge-strong),inset 0 1px 0 color-mix(in oklch,var(--c-bone) 14%,transparent);-webkit-mask-image: linear-gradient(180deg,#000 78%,transparent);mask-image: linear-gradient(180deg,#000 78%,transparent)}.shot__handset::before{content: "";position: absolute;inset-block-start: 0.6875rem;inset-inline-start: 50%;inline-size: 2.75rem;block-size: 0.3125rem;margin-inline-start: -1.375rem;border-radius: var(--radius-pill);background: var(--c-sunken)}.shot__handset .shot__panes{aspect-ratio: 390 / 600;overflow: hidden;border-radius: 0.5rem 0.5rem 0 0;background: var(--c-raised-2)}.shot__handset .shot__pane img{inline-size: 100%;block-size: auto}.shot--phone figcaption{text-align: center}.case-hero-shot{padding-block-end: var(--section-y-tight)}.shot--hero .shot__pick{justify-self: start}.rcc-shots{display: grid;gap: var(--space-l);align-items: end}@media (min-width: 64rem){.rcc-shots{grid-template-columns: minmax(0,8fr) minmax(0,4fr);column-gap: var(--space-xl)}}.demo-rows{display: grid;gap: var(--space-2xl)}.demo-row{display: grid;gap: var(--space-m);align-items: start}@media (min-width: 64rem){.demo-row{grid-template-columns: repeat(12,minmax(0,1fr));column-gap: var(--grid-gap)}.demo-row__say{grid-column: 1 / span 3;position: sticky;inset-block-start: 7rem}.demo-row > .demo{grid-column: 4 / -1}}.demo-row__say{display: grid;gap: var(--space-2xs);align-content: start}.demo-row__say h3{font-size: var(--step-1)}.demo-row__say p{font-size: var(--step--1);line-height: 1.55;max-inline-size: calc(40 * var(--ch-body))}.sec-lede{margin-block-end: var(--space-l)}.sec-after{margin-block: var(--space-m)}.mtable{overflow-x: auto;border-radius: var(--radius-l);background: var(--c-raised-1);box-shadow: inset 0 0 0 1px var(--edge-faint)}.mtable:focus-visible{outline-offset: 2px}.mtable table{inline-size: 100%;min-inline-size: 34rem;border-collapse: collapse;font-variant-numeric: tabular-nums}.mtable th,.mtable td{padding: 0.75rem var(--space-s);text-align: start;vertical-align: baseline}.mtable thead th{font-family: var(--font-mono);font-weight: 400;font-size: var(--step--2);letter-spacing: var(--tracking-label);text-transform: uppercase;color: var(--c-bone-3);box-shadow: inset 0 -1px 0 var(--edge-faint)}.mtable tbody th{font-family: var(--font-ui);font-weight: var(--weight-medium);color: var(--c-bone)}.mtable td{color: var(--c-bone-2)}.mtable tbody tr + tr > *{box-shadow: inset 0 1px 0 var(--edge-faint)}.mtable td:nth-child(2){color: var(--c-lilac)}.build--a .build__core,.build--b .build__core{align-content: start}.build--b .shot{padding-block-start: var(--space-s)}}