@layer reset, base, layout, components, theme;

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  --ink: #1b1e2b;
  --ink-2: #262a3a;
  --ink-hover: #30354a;
  --ink-line: #383d50;
  --on-ink: #f4f5f8;
  --on-ink-muted: #a9aebd;
  --coral: #ff5b3a;
  --coral-hover: #ff7a5e;

  --paper: #ffffff;
  --paper-2: #f4f5f8;

  --card: var(--paper-2);

  --paper-header: #f8f9fb;
  --line: #e3e5eb;
  --line-strong: #878c9c;
  --text: #1b1e2b;
  --muted: #5d6272;

  --accent: #c03718;
  --danger: #b42318;
  --focus: var(--accent);

  --display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);

  --h1: clamp(2.25rem, 1.3rem + 3.8vw, 4.25rem);
  --h1-page: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  --h2: clamp(1.625rem, 1.1rem + 2vw, 2.75rem);
  --h2-sm: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --h3: 1.1875rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4rem;
  --space-9: 5.5rem;

  --gutter: clamp(1rem, 4vw, 2.5rem);

  --section-y: clamp(3.5rem, 1.5rem + 5vw, 6.5rem);

  --gap-meta: var(--space-1);
  --gap-list: var(--space-2);

  --gap-controls: var(--space-5);
  --gap-text: var(--space-4);
  --gap-foot: var(--space-5);
  --gap-items: var(--space-6);
  --head-gap: var(--space-7);
  --gap-split: clamp(var(--space-6), 5vw - 1rem, var(--space-8));
  --gap-tiles: var(--space-3);

  --inset: clamp(var(--space-5), 1rem + 1vw, var(--space-6));
  --measure: 76rem;
  --measure-text: 42rem;
  --measure-col: 48rem;
  --header-h: 4.25rem;

  --chrome-h: calc(var(--header-h) + 1px);
  --touch-min: 2.75rem;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-phone: 14px;
  --shadow: 0 1px 2px rgb(27 30 43 / 0.08), 0 12px 32px rgb(27 30 43 / 0.12);

  --panel-light: color-mix(in srgb, var(--on-ink) 12%, transparent);
  --panel-glow: color-mix(in srgb, var(--coral) 30%, transparent);

  --hero-grid: color-mix(in srgb, var(--ink) 9%, transparent);
  --hero-glow: color-mix(in srgb, var(--coral) 18%, transparent);
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, pre) {
    margin: 0;
  }

  :where(ul, ol)[class] {
    padding: 0;
    list-style: none;
  }

  :where(img, picture, svg) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(button, input, textarea, select) {
    font: inherit;
    color: inherit;
  }
}

@layer base {
  html {
    color-scheme: light;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--header-h) + var(--space-4));
  }

  body {
    background: var(--paper);
    color: var(--text);
    font: 400 var(--text-base) / 1.6 var(--font);
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  h1 {
    line-height: 1.04;
    letter-spacing: -0.04em;
  }

  p,
  li {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--ink);
    color: var(--on-ink);
  }

  code,
  pre {
    font-family: var(--mono);
  }
}

@layer layout {
  .wrap {
    inline-size: min(100% - 2 * var(--gutter), var(--measure));
    margin-inline: auto;
  }

  .section {
    padding-block: var(--section-y);
  }

  .section--tint {
    --card: var(--paper);
    background: var(--paper-2);
  }

  .split > .section-head {
    margin-block-end: var(--head-gap);
  }
}

@layer components {

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: var(--space-2);
    z-index: 60;
    padding: var(--space-3) var(--space-4);
    background: var(--ink);
    color: var(--on-ink);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transform: translateY(-200%);
  }

  .skip-link:focus-visible {
    transform: none;
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-list);
    min-block-size: var(--touch-min);
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
  }

  .btn:active {
    transform: scale(0.98);
  }

  .btn--coral {
    background: var(--coral);
    color: var(--ink);
  }

  .btn--coral:hover {
    background: var(--coral-hover);
  }

  .btn--dark {
    background: var(--ink);
    color: var(--on-ink);
  }

  .btn--dark:hover {
    background: var(--ink-hover);
  }

  .btn:disabled {
    cursor: progress;
    opacity: 0.6;
  }

  .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-list);
    padding-block: max(0px, (var(--touch-min) - 1lh) / 2);
    margin-block: min(0px, (1lh - var(--touch-min)) / 2);
    font-weight: 600;
    text-decoration: none;
  }

  .arrow-link__label {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 0.35em;
    transition: text-decoration-color 0.15s var(--ease);
  }

  .arrow-link__icon {
    transition: transform 0.15s var(--ease);
  }

  .arrow-link:hover .arrow-link__label {
    text-decoration-color: currentColor;
  }

  .arrow-link:hover .arrow-link__icon {
    transform: translateX(3px);
  }

  .arrow-link[target="_blank"]:hover .arrow-link__icon {
    transform: translate(2px, -2px);
  }

  .link-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--gap-controls);
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-controls);
    margin-block-start: var(--gap-foot);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper-header);
    border-block-end: 1px solid var(--line);
  }

  .header-bar {
    display: flex;
    align-items: center;
    gap: var(--gap-controls);
    min-block-size: var(--header-h);
  }

  .brand {
    display: inline-flex;
    flex: none;
    gap: var(--gap-list);
    align-items: center;
    min-block-size: var(--touch-min);
    color: var(--text);

    font: 600 clamp(1.625rem, 15vw - 1.375rem, 2rem) / 1 var(--font);
    letter-spacing: -0.01em;
    text-decoration: none;
  }

  .site-footer .brand {
    color: var(--on-ink);
  }

  .nav {
    display: none;
  }

  .nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-min);
    padding-inline: var(--space-3);
    color: var(--muted);
    font-family: var(--display);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
  }

  .nav a:hover,
  .nav a[aria-current="page"] {
    color: var(--text);
  }

  .nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.6em;
  }

  .header-cta {
    flex: none;
    margin-inline-start: auto;
    padding-inline: var(--space-4);
  }

  .nav-toggle {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--touch-min);
    block-size: var(--touch-min);

    margin-inline: calc(var(--gutter) - var(--gap-controls) - var(--space-3)) calc(-1 * var(--space-3));
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    inline-size: 1.25rem;
    block-size: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
  }

  .nav-toggle__bars {
    position: relative;
  }

  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }

  .nav-toggle__bars::before {
    transform: translateY(-6px);
  }

  .nav-toggle__bars::after {
    transform: translateY(6px);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background-color: transparent;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: rotate(-45deg);
  }

  .mobile-nav {
    display: none;
    border-block-start: 1px solid var(--line);
  }

  @media (width < 56rem) {
    .site-header:has(.nav-toggle[aria-expanded="true"]) .mobile-nav {
      display: block;
    }
  }

  .mobile-nav__inner {
    display: grid;
    padding-block: var(--space-2) var(--space-6);
  }

  .mobile-nav__inner > a:not(.mobile-nav__mail) {
    display: flex;
    align-items: center;
    min-block-size: 3.25rem;
    border-block-end: 1px solid var(--line);
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  .mobile-nav__inner > a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.35em;
  }

  .mobile-nav__inner .btn {
    margin-block-start: var(--gap-foot);
  }

  .mobile-nav__mail {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch-min);
    margin-block-start: var(--gap-list);
    color: var(--muted);
  }

  .hero,
  .page-hero,
  .wizard-head {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
      radial-gradient(var(--glow), var(--hero-glow), transparent),
      radial-gradient(ellipse 55% 26rem at var(--light-at), var(--paper), transparent),
      var(--paper-2);
  }

  .hero::before,
  .page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    font: 600 var(--h1) / 1 var(--display);
    background-image:
      linear-gradient(var(--hero-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
    background-position: center top;
    background-size: 56px 56px;

    mask-image:
      linear-gradient(90deg, var(--ink) calc(50% - var(--grid-clear) - 6rem), transparent calc(50% - var(--grid-clear)),
        transparent calc(50% + var(--grid-clear)), var(--ink) calc(50% + var(--grid-clear) + 6rem)),
      linear-gradient(var(--ink), transparent var(--grid-end));
    mask-composite: intersect;
  }

  .hero {
    --panel-h: clamp(16rem, 8rem + 26vw, 30rem);
    --glow: ellipse 60% 9rem at 50% calc(100% - var(--panel-h));
    --light-at: 50% 0;
    --grid-clear: 9ch;
    --grid-end: calc(100% - var(--panel-h));
    padding-block-start: var(--space-7);
    text-align: center;
  }

  .hero h1 {
    max-inline-size: 18ch;
    margin-inline: auto;
    font-size: var(--h1);
  }

  .hero__lead {
    max-inline-size: 34rem;
    margin: var(--gap-text) auto 0;
    color: var(--muted);
    font-size: var(--text-lg);
  }

  .hero .cta-row {
    justify-content: center;
  }

  .panel {
    position: relative;
    block-size: var(--panel-h);
    margin-block-start: var(--head-gap);
    overflow: clip;
    background:
      radial-gradient(ellipse 70% 60% at 50% 0, var(--panel-light), transparent),
      radial-gradient(ellipse 80% 70% at 50% 100%, var(--panel-glow), transparent),
      var(--ink);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .panel__desk {
    position: absolute;
    inset-block-start: 10%;
    inset-inline-start: 18%;
    inline-size: 64%;
    border-radius: var(--radius);
  }

  .panel__phone {
    position: absolute;
    inset-block-start: 26%;
    inline-size: 22%;
    border-radius: var(--radius-lg);

    outline: 3px solid var(--ink-line);
    outline-offset: -3px;
  }

  .panel__phone--left {
    inset-inline-start: 4%;
    transform: rotate(-6deg);
  }

  .panel__phone--right {
    inset-inline-end: 4%;
    transform: rotate(6deg);
  }

  .page-hero {
    --glow: ellipse 70% 7rem at 60% 100%;
    --light-at: 20% 0;
    --grid-clear: min(50% - var(--gutter), var(--measure) / 2);
    --grid-end: 100%;
    padding-block: var(--space-5) var(--section-y);
  }

  .page-hero__grid {
    display: grid;
    gap: var(--gap-text);
    margin-block-start: var(--gap-items);
  }

  .page-hero h1 {
    font-size: var(--h1-page);
    max-inline-size: 18ch;
  }

  .page-hero__lead {
    max-inline-size: var(--measure-text);
    color: var(--muted);
    font-size: var(--text-lg);
  }

  .page-hero__lead p + p {
    margin-block-start: var(--gap-text);
  }

  .page-hero--product h1,
  .page-hero--error h1 {
    margin-block-start: var(--gap-items);
  }

  .page-hero--product .page-hero__lead,
  .page-hero--error .page-hero__lead {
    margin-block-start: var(--gap-text);
  }

  .page-hero__meta {
    margin-block-start: var(--gap-text);
    color: var(--muted);
    font-size: var(--text-sm);
  }

  .page-hero__shot {
    margin-block-start: var(--head-gap);
  }

  .page-hero__shot img {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .error-code {
    margin-block-start: var(--gap-items);
    color: var(--coral);
    font-family: var(--display);
    font-size: clamp(4rem, 2rem + 8vw, 8rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
  }

  .crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-list);
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: var(--text-sm);
  }

  .crumbs li + li::before {
    content: "/";
    margin-inline-end: var(--gap-list);
    color: var(--line-strong);
  }

  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    text-decoration: none;
  }

  .crumbs a:hover {
    color: var(--text);
    text-decoration: underline;
  }

  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--gap-text) var(--gap-items);
    margin-block-end: var(--head-gap);
  }

  .section-head h2 {
    font-size: var(--h2);
    max-inline-size: 20ch;
  }

  .section-head p {
    max-inline-size: 38rem;
    color: var(--muted);
    font-size: var(--text-lg);
  }

  .section-head__copy {
    display: grid;
    gap: var(--gap-text);
  }

  .work-grid {
    display: grid;
    gap: var(--gap-items);
  }

  .work {
    position: relative;
    display: grid;
    gap: var(--gap-text);
    align-content: start;
  }

  .work__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--card);
    border-radius: var(--radius-lg);
  }

  .work__desk {
    position: absolute;
    inset-inline-start: 7%;
    inset-block-start: 9%;
    inline-size: 86%;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
  }

  .work__phone {
    position: absolute;
    inset-inline-end: 6%;
    inset-block-end: -10%;
    inline-size: 23%;
    border: 3px solid var(--ink);
    border-radius: var(--radius-phone);
    box-shadow: var(--shadow);
  }

  .work__desk,
  .work__phone {
    transition: transform 0.3s var(--ease);
  }

  .work:hover .work__desk {
    transform: translateY(-3px);
  }

  .work:hover .work__phone {
    transform: translateY(-6px);
  }

  .work__body {
    display: grid;
  }

  .work__name {
    font-size: var(--h3);
  }

  .work__name::after {
    content: " \2197";
    color: var(--muted);
    font-weight: 400;
  }

  .work__link {
    text-decoration: none;
  }

  .work__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
  }

  .work__link:focus-visible {
    outline: none;
  }

  .work__link:focus-visible::after {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
  }

  .work:hover .work__link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .work__ind {
    margin-block-start: var(--gap-meta);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .work__desc {
    margin-block-start: var(--gap-text);
  }

  .plans {
    display: grid;
    gap: var(--gap-text);
  }

  .plan-pick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-list);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .plan-tab {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--gap-meta);
    aspect-ratio: 1;
    padding: var(--space-3);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    text-align: center;
    cursor: pointer;
  }

  .plan-tab__input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .plan-tab:has(.plan-tab__input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .plan-tab:has(.plan-tab__input:checked) {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
  }

  .plan-tab__name {
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.875rem;
  }

  .plan-tab__price {
    font-family: var(--display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
  }

  .plan-tab__monthly {
    color: var(--muted);
    font-size: var(--text-sm);
  }

  .plan-tab:has(.plan-tab__input:checked) .plan-tab__monthly {
    color: var(--on-ink-muted);
  }

  .plan {
    display: none;
    gap: var(--gap-text);
    align-content: start;
    padding: var(--inset);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .plans:has(#pick-starter:checked) #starter,
  .plans:has(#pick-business:checked) #business,
  .plans:has(#pick-custom:checked) #custom {
    display: grid;
  }

  @supports not selector(:has(*)) {
    .plan-pick {
      display: none;
    }

    .plan {
      display: grid;
    }
  }

  .plan--featured {
    --focus: var(--coral);
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
  }

  .plan__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-list);
    font-size: var(--h3);
  }

  .plan__tag {
    color: var(--coral);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
  }

  .plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-meta);
  }

  .plan__amount {
    font-family: var(--display);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
  }

  .plan__note,
  .plan__summary {
    color: var(--muted);
  }

  .plan__note {
    font-size: var(--text-sm);
  }

  .plan__monthly {
    font-weight: 600;
  }

  .plan--featured .plan__note,
  .plan--featured .plan__summary {
    color: var(--on-ink-muted);
  }

  .plan__list {
    display: grid;
    gap: var(--gap-list);
    align-content: start;
    padding-block: var(--space-4) var(--space-2);
    border-block-start: 1px solid var(--line);
    font-size: 0.9375rem;
  }

  .plan--featured .plan__list {
    border-color: var(--ink-line);
  }

  .plan__list li,
  .ticks li {
    position: relative;
    padding-inline-start: var(--space-5);
  }

  .plan__list li::before,
  .ticks li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.1em;
    inset-block-start: 0.5em;
    inline-size: 0.6em;
    block-size: 0.32em;
    border-inline-start: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
  }

  .plan .btn {
    align-self: end;
  }

  .tools {
    display: grid;
    gap: var(--gap-tiles);
  }

  .tool {
    position: relative;
    display: grid;
    gap: var(--gap-text);
    align-content: start;
    padding: var(--inset);
    background: var(--card);
    border-radius: var(--radius-lg);
  }

  .tiles {
    display: grid;
    gap: var(--gap-tiles);
  }

  .tile {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--gap-text);
    justify-items: start;
    padding: var(--inset);
    background: var(--card);
    border-radius: var(--radius-lg);
  }

  .tile h3 {
    font-size: var(--h2-sm);
  }

  .tile p {
    max-inline-size: 34rem;
    color: var(--muted);
  }

  .glyph {
    inline-size: 3rem;
    block-size: 3rem;
  }

  .glyph + h2,
  .glyph + h3 {
    margin-block-start: var(--gap-text);
  }

  .glyph .k {
    fill: var(--ink);
  }

  .glyph .c {
    fill: var(--coral);
  }

  .glyph .l {
    fill: none;
    stroke: var(--ink);
    stroke-width: 4;
  }

  .cols {
    display: grid;
    gap: var(--gap-tiles);
  }

  .blocks {
    display: grid;
    gap: var(--gap-tiles);
  }

  .block {
    display: grid;
    gap: var(--gap-text) var(--gap-split);
    align-content: start;
    padding: var(--inset);
    background: var(--card);
    border-radius: var(--radius-lg);
  }

  .block h2 {
    font-size: var(--h2-sm);
  }

  .block__body {
    display: grid;
    gap: var(--gap-text);
    justify-items: start;
  }

  .block p {
    max-inline-size: var(--measure-text);
    color: var(--muted);
    font-size: var(--text-lg);
  }

  .col {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--gap-text);
    padding: var(--inset);
    background: var(--card);
    border-radius: var(--radius-lg);
  }

  .col h3,
  .col h2 {
    font-size: var(--h3);
  }

  .col p {
    color: var(--muted);
  }

  .col .arrow-link,
  .col .btn {
    justify-self: start;
  }

  .tool__media img {
    border-radius: var(--radius);
  }

  .tool__name {
    font-size: var(--h3);
  }

  .tool__name a {
    text-decoration: none;
  }

  .tool__name a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .tool:hover .tool__name a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .tool__kind {
    margin-block: var(--gap-meta) var(--gap-text);
    color: var(--muted);
    font-size: var(--text-sm);
  }

  .duo {
    display: grid;
    gap: var(--gap-tiles);
  }

  .service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-text);
    padding: var(--inset);
    background: var(--card);
    border-radius: var(--radius-lg);
  }

  .service h3 {
    font-size: var(--h2-sm);
  }

  .service > p {
    color: var(--muted);
  }

  .service .ticks {
    flex: 1;
    align-self: stretch;
  }

  .stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-list);
    margin-block-start: auto;
  }

  .stack li {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .faq {
    max-inline-size: var(--measure-col);
    border-block-start: 2px solid var(--text);
  }

  .faq details {
    border-block-end: 1px solid var(--line);
  }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-list);
    min-block-size: var(--touch-min);
    padding-block: var(--space-4);
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
    list-style: none;
    cursor: pointer;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::after {
    content: "+";
    flex: none;
    color: var(--muted);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1;
  }

  .faq details[open] summary::after {
    content: "\2212";
  }

  .faq details p {
    max-inline-size: var(--measure-text);
    padding-block-end: var(--space-4);
    color: var(--muted);
  }

  .cta-band {
    --focus: var(--coral);
    background: var(--ink);
    color: var(--on-ink);
    padding-block: var(--section-y);
  }

  .cta-band__inner {
    display: grid;
    justify-items: start;
    gap: var(--gap-foot);
  }

  .cta-band h2 {
    font-size: var(--h2);
    max-inline-size: 18ch;
  }

  .cta-band p {
    max-inline-size: 36rem;
    margin-block-start: var(--gap-text);
    color: var(--on-ink-muted);
    font-size: var(--text-lg);
  }

  .site-footer {
    --focus: var(--coral);
    background: var(--ink);
    color: var(--on-ink-muted);
    padding-block: var(--section-y) var(--space-5);
    border-block-start: 1px solid var(--ink-line);
  }

  .footer-grid {
    display: grid;
    gap: var(--gap-items);
  }

  .footer-brand p {
    max-inline-size: 32ch;
    margin-block-start: var(--gap-text);
  }

  .footer-col {
    display: grid;
    align-content: start;
  }

  .footer-col h2 {
    margin-block-end: var(--gap-text);
    color: var(--on-ink);
    font-size: var(--text-sm);
    letter-spacing: 0;
  }

  .footer-col a {
    display: flex;
    align-items: center;
    min-block-size: var(--touch-min);
    text-decoration: none;
  }

  .footer-col a:hover {
    color: var(--on-ink);
    text-decoration: underline;
  }

  @media (pointer: fine) {
    .footer-col a {
      min-block-size: var(--space-6);
    }
  }

  .footer-copy {
    margin-block-start: var(--gap-items);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--ink-line);
    font-size: var(--text-sm);
  }

  .prose {
    max-inline-size: var(--measure-text);
  }

  .prose p + p {
    margin-block-start: var(--gap-text);
  }

  .prose h2 {
    margin-block: var(--gap-items) var(--gap-text);
    font-size: 1.375rem;
  }

  .prose a {
    color: var(--accent);
  }

  .qs-list {
    display: grid;
    gap: var(--gap-items);
    max-inline-size: 52rem;
    counter-reset: qs;
  }

  .qs {
    display: grid;
    gap: var(--gap-text);
    min-inline-size: 0;
    counter-increment: qs;
  }

  .qs h3 {
    font-size: var(--h3);
  }

  .qs h3::before {
    content: counter(qs) ". ";
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .qs p {
    color: var(--muted);
  }

  .code {
    padding: var(--inset);
    overflow-x: auto;
    background: var(--ink);
    color: var(--on-ink);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    line-height: 1.6;
    tab-size: 4;
  }

  .ticks {
    border-block-start: 2px solid var(--text);
  }

  .ticks li {
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--line);
  }

  .ticks li::before {
    inset-block-start: calc(var(--space-3) + 0.5em);
  }

  .features {
    display: grid;
    column-gap: var(--gap-items);
  }

  .features__not {
    max-inline-size: var(--measure-text);
    margin-block-start: var(--gap-foot);
    color: var(--muted);
  }

  .feature-tabs {
    display: flex;
    gap: var(--gap-list);
    margin-block-end: var(--gap-text);
    overflow-x: auto;
    border-block-end: 1px solid var(--line);
  }

  .feature-tab {
    display: grid;
    gap: var(--gap-list);
    min-block-size: var(--touch-min);
    padding: var(--space-3) var(--space-3) 0;
    background: none;
    border: 0;
    color: var(--muted);
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    cursor: pointer;
  }

  .feature-tab:hover,
  .feature-tab.is-active {
    color: var(--text);
  }

  .feature-tab__track {
    display: block;
    block-size: 3px;
    overflow: hidden;
  }

  .feature-tab.is-active .feature-tab__track {
    background: var(--line);
  }

  .feature-progress__fill {
    display: block;
    block-size: 100%;
    background: var(--coral);
    transform: scaleX(0);
    transform-origin: left;
  }

  .feature-tab.is-active .feature-progress__fill {
    animation: feature-fill 5s linear forwards;
  }

  .feature-stage {
    display: grid;
  }

  .feature-panel {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
  }

  .feature-panel.is-active {
    opacity: 1;
    visibility: visible;
  }

  .feature-panel img {
    inline-size: auto;
    max-block-size: min(55svh, 26rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .feature-panel figcaption {
    margin-block-start: var(--gap-text);
    color: var(--muted);
  }

  .wizard {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: var(--space-4);
  }

  .wizard-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 60%, transparent);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.2s var(--ease);
  }

  .wizard-panel {
    --focus: var(--ink);
    position: relative;
    inline-size: min(100%, 34rem);
    max-block-size: calc(100dvh - 2 * var(--space-4));
    overflow-y: auto;
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }

  .wizard-head {
    --glow: ellipse 60% 4rem at 85% 100%;
    --light-at: 15% 0;
    padding: var(--inset);
    border-block-end: 1px solid var(--line);
  }

  .wizard-body {
    padding: var(--inset);
  }

  .wizard.is-open .wizard-backdrop,
  .wizard.is-open .wizard-panel {
    opacity: 1;
  }

  .wizard.is-open .wizard-panel {
    transform: none;
  }

  .wizard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--gap-text);
  }

  .wizard-progress {
    display: flex;
    align-items: center;
    gap: var(--gap-list);
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1rem;
    font-variant-numeric: tabular-nums;
  }

  .wizard-bar {
    display: flex;
    gap: var(--gap-meta);
  }

  .wizard-bar i {
    inline-size: 1.75rem;
    block-size: 4px;
    background: var(--line);
    border-radius: 2px;
    transition: background-color 0.2s var(--ease);
  }

  .wizard-bar i:first-child,
  .wizard-panel:has([data-step="4"]:not([hidden])) .wizard-bar i,
  .wizard-panel:has([data-step="3"]:not([hidden])) .wizard-bar i:nth-child(-n + 3),
  .wizard-panel:has([data-step="2"]:not([hidden])) .wizard-bar i:nth-child(2) {
    background: var(--coral);
  }

  .wizard-close {
    --icon: 1rem;
    display: grid;
    place-items: center;
    inline-size: var(--touch-min);
    block-size: var(--touch-min);
    margin-block: calc((var(--icon) - var(--touch-min)) / 2);
    margin-inline-end: calc((var(--icon) - var(--touch-min)) / 2);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
  }

  .wizard-close svg {
    inline-size: var(--icon);
    block-size: var(--icon);
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .wizard-panel h2 {
    font-size: 1.5rem;
  }

  .wizard-promise,
  .wizard-hint {
    color: var(--muted);
    font-size: 0.9375rem;
  }

  .wizard-promise {
    margin-block-start: var(--gap-text);
  }

  .chip-grid {
    display: grid;
    gap: var(--gap-list);
  }

  .chip {
    display: flex;
    align-items: center;
    gap: var(--gap-list);
    min-block-size: var(--touch-min);
    padding: var(--space-3) var(--space-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
  }

  .chip::after {
    content: "\2192" / "";
    margin-inline-start: auto;
    color: var(--muted);
    transition: transform 0.15s var(--ease), color 0.15s var(--ease);
  }

  .chip:hover {
    background: var(--paper);
    border-color: var(--text);
  }

  .chip:hover::after {
    color: var(--text);
    transform: translateX(3px);
  }

  .chip.is-selected {
    background: var(--paper);
    border-color: var(--text);
    box-shadow: inset 0 0 0 1px var(--text);
  }

  .chip .glyph {
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }

  .wizard-form {
    display: grid;
    gap: var(--gap-meta);
  }

  .wizard-form > :first-child {
    margin-block-start: 0;
  }

  .field-label {
    margin-block-start: var(--gap-text);
    font-weight: 600;
    font-size: 0.9375rem;
  }

  .field {
    min-block-size: var(--touch-min);
    padding: var(--space-2) var(--space-3);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: 1rem;
  }

  .field[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
  }

  .field--area {
    min-block-size: 6rem;
    resize: vertical;
  }

  .wizard-error {
    color: var(--danger);
    font-size: var(--text-sm);
  }

  .wizard-error a {
    color: inherit;
  }

  .wizard-done {
    display: grid;
    justify-items: center;
    padding-block: var(--gap-text);
    text-align: center;
  }

  .wizard-done .glyph {
    inline-size: 3.5rem;
    block-size: 3.5rem;
  }

  .wizard-done .glyph + h2 {
    margin-block-start: var(--gap-foot);
  }

  .wizard-done p {
    margin-block-start: var(--gap-list);
    color: var(--muted);
  }

  .wizard-done strong {
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .wizard-done .btn {
    margin-block-start: var(--gap-foot);
  }

  .wizard-back {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-list);
    min-block-size: var(--touch-min);
    margin-block-start: var(--gap-foot);
    padding: 0;
    background: none;
    border: 0;
    font-weight: 600;
    cursor: pointer;
  }

  @media (min-width: 30rem) {

    .plan-tab {
      aspect-ratio: auto;
      padding-block: var(--space-5);
    }
  }

  @media (min-width: 48rem) {
    .panel__phone {
      inline-size: 16%;
    }

    .panel__phone--left {
      inset-inline-start: 7%;
    }

    .panel__phone--right {
      inset-inline-end: 7%;
    }

    .work-grid,
    .tiles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cols:not(:has(> :nth-child(4))) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .block {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .tools {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cta-band__inner {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: var(--gap-split);
    }

    .footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (48rem <= width < 64rem) {
    .tools > :last-child:nth-child(odd) {
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: center;
      column-gap: var(--gap-items);
    }
  }

  @media (min-width: 56rem) {
    .nav {
      display: flex;
      gap: var(--gap-list);
      margin-inline-start: auto;
    }

    .header-cta {
      margin-inline-start: var(--gap-list);
      padding-inline: var(--space-5);
    }

    .nav-toggle {
      display: none;
    }
  }

  @media (min-width: 64rem) {
    .hero {
      padding-block-start: var(--section-y);
    }

    .page-hero__grid {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      align-items: end;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      column-gap: var(--gap-split);
      align-items: start;
    }

    .split > .section-head {
      margin-block-end: 0;
    }

    .duo {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tools:has(> :nth-child(3):last-child) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .features {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .plans {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(6, auto);
      gap: 0 var(--gap-tiles);
    }

    .plan-pick {
      display: none;
    }

    .plan {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
    }

    .footer-grid {
      grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    }
  }
}

@layer theme {

  body::after {
    background: var(--coral);
  }
}

[hidden] {
  display: none;
}

@keyframes feature-fill {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }

  .feature-tab.is-active .feature-progress__fill {
    transform: scaleX(1);
  }
}

@layer components {
  @supports (animation-timeline: scroll()) {
    body::after {
      content: "";
      position: fixed;
      z-index: 45;
      inset: var(--chrome-h) 0 auto;
      height: 0.1875rem;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: scroll-progress linear both;
      animation-timeline: scroll(root block);
    }

    @keyframes scroll-progress {
      to {
        transform: scaleX(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body::after {
        content: none;
      }
    }
  }
}