:root {
      --navy-900: #101E2F;
      --navy-800: #16202E;
      --navy-700: #192637;
      --navy-600: #1A2B3E;
      --navy-500: #1F384F;
      --navy-400: #2B455E;

      --brand: #E56B2D;

      --brand-dark: #BC5020;

      --brand-lite: #FF803D;

      --radius-s: 8px;
      --radius-m: 14px;
      --radius-l: 22px;
      --radius-xl: 32px;

      --maxw: 1180px;
      --gut: clamp(20px, 5vw, 56px);

      --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

      --ease: cubic-bezier(.22, .61, .36, 1);

      --bg: #F1F4F8;

      --bg-alt: #E6EBF1;
      --bg-deep: var(--navy-700);
      --surface: #FFFFFF;
      --surface-2: #E2E8EF;
      --line: #D0D8E2;
      --line-soft: #E0E6EE;
      --ink: #0F1B29;

      --ink-2: #41505F;

      --ink-3: #5A6B7C;

      --accent: #AD4718;

      --accent-fill: var(--brand);

      --on-accent: var(--navy-900);

      --shadow: 0 1px 2px rgba(16, 30, 47, .07), 0 10px 28px rgba(16, 30, 47, .09);
      --shadow-lg: 0 2px 6px rgba(16, 30, 47, .08), 0 28px 68px rgba(16, 30, 47, .16);
      --glass: rgba(248, 250, 252, .82);
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg: var(--navy-700);
        --bg-alt: var(--navy-800);
        --bg-deep: var(--navy-900);
        --surface: #1E2C3E;
        --surface-2: #223347;
        --line: #2E4056;
        --line-soft: #26364A;
        --ink: #FFFFFF;
        --ink-2: #A8B6C6;
        --ink-3: #8494A6;
        --accent: var(--brand);

        --accent-fill: var(--brand);
        --on-accent: var(--navy-900);
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .4);
        --glass: rgba(25, 38, 55, .72);
      }
    }

    :root[data-theme="dark"] {
      --bg: var(--navy-700);
      --bg-alt: var(--navy-800);
      --bg-deep: var(--navy-900);
      --surface: #1E2C3E;
      --surface-2: #223347;
      --line: #2E4056;
      --line-soft: #26364A;
      --ink: #FFFFFF;
      --ink-2: #A8B6C6;
      --ink-3: #8494A6;
      --accent: var(--brand);
      --accent-fill: var(--brand);
      --on-accent: var(--navy-900);
      --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
      --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .4);
      --glass: rgba(25, 38, 55, .72);
    }

    :root[data-accent="steel"] {
      --brand: #4E86C6;
      --brand-dark: #2C5F97;
      --brand-lite: #6BA3DD;
    }

    :root[data-accent="summit"] {
      --brand: #2FA36B;
      --brand-dark: #1E7A4E;
      --brand-lite: #45C286;
    }

    :root[data-accent="mono"] {
      --brand: #7C8B9B;
      --brand-dark: #4A5866;
      --brand-lite: #9BAAB9;
    }

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

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
      }
    }

    body {
      margin: 0;
      font-family: var(--font);
      font-size: 17px;
      line-height: 1.6;
      color: var(--ink);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img,
    svg {
      max-width: 100%;
    }

    a {
      color: var(--accent);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    h1,
    h2,
    h3,
    h4 {
      margin: 0;
      line-height: 1.1;
      letter-spacing: -.02em;
      font-weight: 800;
    }

    p {
      margin: 0;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    :focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
      border-radius: 4px;
    }

    .wrap {
      width: 100%;
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--gut);
    }

    .section {
      padding-block: clamp(64px, 9vw, 130px);
    }

    .section--alt {
      background: var(--bg-alt);
    }

    .section--deep {
      background: var(--bg-deep);
      color: #fff;
    }

    .section--deep {
      --ink: #fff;
      --ink-2: #A8B6C6;
      --ink-3: #8494A6;
      --accent: var(--brand);
      --line: #2E4056;
      --surface: rgba(255, 255, 255, .05);
      --surface-2: rgba(255, 255, 255, .06);
      --line-soft: rgba(255, 255, 255, .09);
    }

    .eyebrow {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 14px;
    }

    .h2 {
      font-size: clamp(30px, 4.4vw, 50px);
    }

    .h3 {
      font-size: clamp(20px, 2.2vw, 25px);
      font-weight: 700;
      letter-spacing: -.015em;
    }

    .lead {
      font-size: clamp(17px, 1.7vw, 21px);
      color: var(--ink-2);
      line-height: 1.55;
      max-width: 62ch;
    }

    .muted {
      color: var(--ink-3);
      font-size: 14px;
      line-height: 1.5;
    }

    .section-head {
      max-width: 70ch;
      margin-bottom: clamp(36px, 5vw, 64px);
    }

    .section-head .lead {
      margin-top: 18px;
    }

    @font-face {
      font-family: "GradeMark";

      src: url("data:font/otf;charset=utf-8;base64,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") format("opentype");
      font-weight: 400;
      font-style: normal;

      font-display: block;
    }

    .brandmark {

      --ink: 240px;
      display: block;
      font-family: "GradeMark";

      font-weight: 400;
      font-synthesis: none;
      font-size: calc(var(--ink) / 3.82);

      line-height: .7;

      letter-spacing: 0;
      color: currentColor;

      margin-inline: -.04em;
      -webkit-font-smoothing: antialiased;
    }

    .brandmark__glyph {
      display: block;
    }

    .brandmark__text {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .brandmark--fallback {
      font-family: var(--font);
    }

    .brandmark--fallback .brandmark__glyph {
      display: none;
    }

    .brandmark--fallback .brandmark__text {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip-path: none;
      font-size: .62em;
      font-weight: 900;
      letter-spacing: -.02em;
      line-height: 1;
    }

    .brandmark--nav {
      --ink: 118px;
    }

    .brandmark--hero {
      --ink: min(520px, 78vw);
    }

    .brandmark--foot {
      --ink: 104px;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--glass);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--line-soft);
    }

    .topbar__in {
      display: flex;
      align-items: center;
      gap: 12px;
      height: 62px;
    }

    .topbar a.brand {
      color: var(--ink);
      display: flex;
      align-items: center;
    }

    .topbar a.brand:hover {
      text-decoration: none;
      opacity: .8;
    }

    .navlinks {
      display: flex;
      gap: 4px;
      margin-left: 18px;
      flex: 1;
    }

    .navlinks a {
      color: var(--ink-2);
      font-size: 15px;
      font-weight: 600;
      padding: 8px 12px;
      border-radius: 999px;
      transition: background .2s var(--ease), color .2s var(--ease);
    }

    .navlinks a:hover {
      color: var(--ink);
      background: var(--surface-2);
      text-decoration: none;
    }

    .navtools {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .seg {
      display: inline-flex;
      padding: 3px;
      gap: 2px;
      background: var(--surface-2);
      border-radius: 999px;
      border: 1px solid var(--line-soft);
    }

    .seg button {
      appearance: none;
      border: 0;
      background: transparent;
      cursor: pointer;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      color: var(--ink-3);
      padding: 5px 10px;
      border-radius: 999px;
      line-height: 1.2;
      transition: background .18s var(--ease), color .18s var(--ease);
    }

    .seg button[aria-pressed="true"] {
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    }

    .seg button:hover {
      color: var(--ink);
    }

    select.picker {
      appearance: none;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-2);
      background: var(--surface-2);
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      padding: 7px 30px 7px 12px;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236B7A8A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 11px;
    }

    .navlinks.compact {
      display: none;
    }

    @media (max-width: 900px) {
      .navlinks {
        display: none;
      }

      .topbar__in {
        height: 56px;
      }
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -.01em;
      padding: 14px 24px;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      text-decoration: none !important;
      white-space: nowrap;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
    }

    .btn:active {
      transform: translateY(1px) scale(.99);
    }

    .btn[aria-disabled="true"] {
      cursor: default;
      pointer-events: none;
      opacity: .7;
      box-shadow: none;
    }

    .btn--primary {
      background: var(--accent-fill);
      color: var(--on-accent);
      border-color: var(--accent);
      box-shadow: 0 6px 20px rgba(229, 107, 45, .28);
    }

    .btn--primary:hover {
      box-shadow: 0 10px 30px rgba(229, 107, 45, .4);
    }

    .btn--ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line);
    }

    .btn--ghost:hover {
      background: var(--surface-2);
    }

    .btn--onDeep {
      background: rgba(255, 255, 255, .1);
      color: #fff;
      border-color: rgba(255, 255, 255, .22);
    }

    .btn--onDeep:hover {
      background: rgba(255, 255, 255, .17);
    }

    .btn--sm {
      font-size: 14px;
      padding: 9px 16px;
    }

    .btnrow {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .hero {
      position: relative;
      background: var(--navy-700);
      color: #fff;
      overflow: hidden;
    }

    .hero__bg {
      position: absolute;
      inset: 0;
    }

    .hero__half {
      position: absolute;
      inset: 0;
    }

    .hero__half--in {
      background:
        radial-gradient(90% 120% at 18% 0%, rgba(140, 163, 190, .34), transparent 62%),
        linear-gradient(160deg, #253549 0%, #1B2A3C 100%);
      clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%);
    }

    .hero__half--out {
      background:
        radial-gradient(80% 100% at 82% 8%, rgba(96, 166, 255, .30), transparent 60%),
        radial-gradient(70% 90% at 96% 74%, rgba(47, 163, 107, .34), transparent 62%),
        linear-gradient(200deg, #1D3A4F 0%, #16283A 100%);
      clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%);
    }

    .hero__seam {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent, var(--brand) 22%, var(--brand) 78%, transparent);
      clip-path: polygon(56% 0, calc(56% + 2px) 0, calc(44% + 2px) 100%, 44% 100%);
      opacity: .85;
    }

    .hero__grain {
      position: absolute;
      inset: 0;
      opacity: .5;
      background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 4px 4px;
    }

    .hero__in {
      position: relative;
      padding-block: clamp(56px, 8vw, 104px) clamp(56px, 7vw, 96px);
    }

    .hero h1 {
      margin: 0 0 22px;
    }

    .hero__tagline {
      font-size: clamp(19px, 2.7vw, 31px);
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .hero__tagline em {
      font-style: normal;
      color: var(--brand);
    }

    .hero__sub {
      font-size: clamp(16px, 1.6vw, 19px);
      color: #C4D0DD;
      max-width: 54ch;
      line-height: 1.55;
    }

    .hero .btnrow {
      margin-top: 34px;
    }

    .hero__plat {
      margin-top: 26px;
      font-size: 13px;
      color: #93A3B4;
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
    }

    .hero__plat svg {
      opacity: .85;
    }

    .hero__grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(28px, 4vw, 60px);
      align-items: center;
    }

    @media (max-width: 980px) {
      .hero__grid {
        grid-template-columns: 1fr;
      }
    }

    @media (min-width: 981px) {
      .hero__grid> :first-child {
        padding-right: clamp(24px, 8vw, 120px);
      }
    }

    .panel {
      background: rgba(11, 20, 31, .6);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: var(--radius-xl);
      padding: 20px;
      box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    }

    .panel__head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .panel__head span {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: #8FA0B2;
    }

    .dials {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .dial {
      background: rgba(255, 255, 255, .055);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: var(--radius-m);
      padding: 13px 14px;
    }

    .dial b {
      display: block;
      font-size: clamp(26px, 3.4vw, 36px);
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .dial small {
      display: block;
      margin-top: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .11em;
      text-transform: uppercase;
      color: #8FA0B2;
    }

    .dial--grade b {
      color: var(--brand);
    }

    .spark {
      margin-top: 14px;
    }

    .spark svg {
      display: block;
      width: 100%;
      height: 62px;
    }

    @media (prefers-reduced-motion: no-preference) {

      .spark__line {
        stroke-dasharray: 1;
        animation: spark-draw 560ms var(--ease) both;
      }

      .spark__wipe {
        transform-box: fill-box;
        transform-origin: left center;
        animation: spark-wipe 560ms var(--ease) both;
      }

      .spark__dot {
        animation: spark-dot 260ms var(--ease) 420ms both;
      }
    }

    @keyframes spark-draw {
      from {
        stroke-dashoffset: 1;
      }

      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes spark-wipe {
      from {
        transform: scaleX(0);
      }

      to {
        transform: scaleX(1);
      }
    }

    @keyframes spark-dot {
      from {
        opacity: 0;
        transform: scale(.2);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .spark__dot {
      transform-box: fill-box;
      transform-origin: center;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(18px, 2.4vw, 30px);
      counter-reset: s;
    }

    @media (max-width: 860px) {
      .steps {
        grid-template-columns: 1fr;
      }
    }

    .step {
      position: relative;
      padding-top: 26px;
      border-top: 2px solid var(--line);
      counter-increment: s;
    }

    .step::before {
      content: counter(s, decimal-leading-zero);
      position: absolute;
      top: -13px;
      left: 0;
      background: var(--bg);
      padding-right: 12px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .12em;
      color: var(--accent);
    }

    .section--alt .step::before {
      background: var(--bg-alt);
    }

    .step h3 {
      margin-bottom: 10px;
    }

    .step p {
      color: var(--ink-2);
      font-size: 16px;
    }

    .pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px, 2vw, 24px);
    }

    @media (max-width: 900px) {
      .pillars {
        grid-template-columns: 1fr;
      }
    }

    .pillar {
      background: var(--surface);
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-l);
      padding: clamp(24px, 2.6vw, 34px);
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .pillar__ico {
      width: 46px;
      height: 46px;
      border-radius: var(--radius-s);
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--brand) 15%, transparent);
      color: var(--accent);
    }

    .pillar h3 {
      font-size: 22px;
    }

    .pillar p {
      color: var(--ink-2);
      font-size: 16px;
      flex: 1;
    }

    .pillar__proof {
      margin-top: 2px;
      padding-top: 14px;
      border-top: 1px dashed var(--line);
      font-size: 13px;
      color: var(--ink-3);
      line-height: 1.45;
    }

    .pillar__proof strong {
      color: var(--accent);
      font-variant-numeric: tabular-nums;
    }

    .feats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(14px, 1.8vw, 22px);
    }

    @media (max-width: 1000px) {
      .feats {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 660px) {
      .feats {
        grid-template-columns: 1fr;
      }
    }

    .feat {
      background: var(--surface);
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-m);
      padding: 22px;
      transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
    }

    .feat:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
      border-color: var(--line);
    }

    .feat__ico {
      color: var(--accent);
      margin-bottom: 14px;
      display: block;
    }

    .feat h3 {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 7px;
    }

    .feat p {
      font-size: 15px;
      color: var(--ink-2);
      line-height: 1.5;
    }

    .feat__tag {
      display: inline-block;
      margin-top: 12px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-3);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 3px 9px;
    }

    .compat {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(30px, 4vw, 64px);
      align-items: center;
    }

    @media (max-width: 900px) {
      .compat {
        grid-template-columns: 1fr;
      }
    }

    .kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--line-soft);
      border-radius: var(--radius-m);
      overflow: hidden;
    }

    @media (max-width: 520px) {
      .kpis {
        grid-template-columns: 1fr;
      }
    }

    .kpi {
      background: var(--surface);
      padding: 22px 20px;
    }

    .kpi b {
      display: block;
      font-size: clamp(26px, 3.2vw, 34px);
      font-weight: 800;
      letter-spacing: -.03em;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
    }

    .kpi small {
      display: block;
      margin-top: 8px;
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.4;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 22px;
    }

    .chip {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-2);
      background: var(--surface-2);
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      padding: 6px 13px;
    }

    .chip--ok::before {
      content: "✓ ";
      color: var(--accent);
      font-weight: 800;
    }

    .plats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(14px, 1.8vw, 22px);
    }

    @media (max-width: 860px) {
      .plats {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .plat {
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-m);
      padding: 24px 20px;
      background: var(--surface);
    }

    .plat__ico {
      color: var(--accent);
      margin-bottom: 16px;
      display: block;
    }

    .plat h3 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .plat p {
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.5;
    }

    .dataGrid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: clamp(30px, 4vw, 64px);
      align-items: center;
    }

    @media (max-width: 900px) {
      .dataGrid {
        grid-template-columns: 1fr;
      }
    }

    .checks {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .check {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .check__b {
      flex: 0 0 26px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--brand) 18%, transparent);
      color: var(--accent);
      margin-top: 2px;
    }

    .check p {
      font-size: 16px;
      color: var(--ink-2);
    }

    .check p strong {
      color: var(--ink);
      font-weight: 700;
    }

    .indie {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(30px, 4vw, 64px);
      align-items: center;
    }

    @media (max-width: 900px) {
      .indie {
        grid-template-columns: 1fr;
      }
    }

    .quote {
      font-size: clamp(19px, 2.3vw, 27px);
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.3;
      border-left: 3px solid var(--brand);
      padding-left: 22px;
    }

    .stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--line-soft);
      border-radius: var(--radius-m);
      overflow: hidden;
    }

    .stat {
      background: var(--surface);
      padding: 20px;
    }

    .stat b {
      display: block;
      font-size: 27px;
      font-weight: 800;
      letter-spacing: -.03em;
      font-variant-numeric: tabular-nums;
    }

    .stat small {
      display: block;
      margin-top: 6px;
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.4;
    }

    .diaryHead {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: clamp(30px, 4vw, 50px);
    }

    .posts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px, 2vw, 26px);
    }

    @media (max-width: 980px) {
      .posts {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 660px) {
      .posts {
        grid-template-columns: 1fr;
      }
    }

    .post {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-l);
      background: var(--surface);
      overflow: hidden;
      color: inherit;
      transition: transform .22s var(--ease), box-shadow .22s var(--ease);
    }

    .post:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      text-decoration: none;
    }

    .post__cover {
      aspect-ratio: 16/9;
      position: relative;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .post__cover span {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
    }

    .post__body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .post__meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--ink-3);
    }

    .post__tag {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 999px;
    }

    .post__tag--dev {
      background: color-mix(in srgb, #4E86C6 20%, transparent);
      color: #4E86C6;
    }

    :root[data-theme="dark"] .post__tag--dev {
      color: #8FBBEA;
    }

    .post__tag--athlete {
      background: color-mix(in srgb, var(--brand) 20%, transparent);
      color: var(--accent);
    }

    .post h3 {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.25;
    }

    .post p {
      font-size: 15px;
      color: var(--ink-2);
      line-height: 1.5;
      flex: 1;
    }

    .post__more {
      font-size: 14px;
      font-weight: 700;
      color: var(--accent);
    }

    .closing {
      text-align: center;
    }

    .closing .h2 {
      max-width: 24ch;
      margin-inline: auto;
    }

    .closing .lead {
      margin: 20px auto 0;
      text-align: center;
    }

    .priceCard {
      max-width: 560px;
      margin: clamp(34px, 4vw, 54px) auto 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: var(--surface);
      padding: clamp(26px, 3vw, 38px);
      box-shadow: var(--shadow-lg);
    }

    .priceCard__badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--on-accent);
      background: var(--accent-fill);
      border-radius: 999px;
      padding: 5px 12px;
      margin-bottom: 18px;
    }

    .priceCard__amount {
      font-size: clamp(38px, 5vw, 54px);
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1;
    }

    .priceCard__amount small {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0;
      color: var(--ink-3);
      margin-left: 8px;
    }

    .priceCard p {
      margin-top: 14px;
      color: var(--ink-2);
      font-size: 16px;
    }

    .priceCard .btn {
      margin-top: 30px;
    }

    .mailrow {
      display: flex;
      gap: 10px;
      margin-top: 24px;
    }

    @media (max-width: 520px) {
      .mailrow {
        flex-direction: column;
      }
    }

    .mailrow input {
      flex: 1;
      font: inherit;
      font-size: 16px;
      color: var(--ink);
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 13px 18px;
    }

    .mailrow input::placeholder {
      color: var(--ink-3);
    }

    .notice {
      margin-top: 22px;
      font-size: 14px;
      line-height: 1.5;
      border: 1px dashed var(--line);
      border-radius: var(--radius-m);
      padding: 14px 16px;
      color: var(--ink-2);
      text-align: left;
    }

    .notice b {
      color: var(--ink);
    }

    .faq {
      max-width: 800px;
    }

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

    .faq summary {
      cursor: pointer;
      list-style: none;
      padding: 20px 40px 20px 0;
      position: relative;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -.01em;
    }

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

    .faq summary::after {
      content: "";
      position: absolute;
      right: 6px;
      top: 50%;
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--ink-3);
      border-bottom: 2px solid var(--ink-3);
      transform: translateY(-70%) rotate(45deg);
      transition: transform .2s var(--ease);
    }

    .faq details[open] summary::after {
      transform: translateY(-30%) rotate(225deg);
    }

    .faq details p {
      padding: 0 0 22px;
      color: var(--ink-2);
      font-size: 16px;
      max-width: 68ch;
    }

    .aster {
      font-weight: 700;
      text-decoration: none;
      padding-inline: 2px;

      margin-inline: -2px;
      padding-block: 4px;
    }

    .aster:hover {
      text-decoration: none;
    }

    .refs {
      counter-reset: r;
      margin-top: clamp(28px, 3.5vw, 44px);
      display: grid;
      gap: 2px;
    }

    .refs li {
      counter-increment: r;
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 14px;
      padding: 18px 0;
      border-top: 1px solid var(--line-soft);
    }

    .refs li::before {
      content: counter(r);
      font-variant-numeric: tabular-nums;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
      padding-top: 3px;
    }

    .refs cite {
      display: block;
      font-style: normal;
      font-size: 16px;
      line-height: 1.45;
      color: var(--ink);
    }

    .refs cite em {
      font-style: italic;
      color: var(--ink-2);
    }

    .refs p {
      margin-top: 6px;
      font-size: 14px;
      color: var(--ink-3);
      line-height: 1.45;
    }

    @media (max-width: 520px) {
      .refs li {
        grid-template-columns: 24px 1fr;
        gap: 10px;
      }
    }

    .foot {
      background: var(--bg-deep);
      color: #fff;
      padding-block: clamp(46px, 6vw, 72px) 34px;
    }

    .foot__top {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
      padding-bottom: 34px;
      border-bottom: 1px solid rgba(255, 255, 255, .11);
    }

    .foot__nav {
      display: flex;
      gap: clamp(26px, 5vw, 70px);
      flex-wrap: wrap;
    }

    .foot__nav h4 {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: #8494A6;
      margin-bottom: 13px;
    }

    .foot__nav a {
      display: block;
      color: #C4D0DD;
      font-size: 15px;
      padding: 4px 0;
    }

    .foot__nav a:hover {
      color: #fff;
    }

    .foot__brand {
      display: inline-flex;
      color: inherit;
    }

    .foot__brand:hover {
      text-decoration: none;
      opacity: .8;
    }

    .foot__bot {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      padding-top: 26px;
      font-size: 13px;
      color: #8494A6;
    }

    .foot__bot a {
      color: #8494A6;
    }




    .device {
      container-type: inline-size;
      position: relative;
      isolation: isolate;
      flex: none;
      width: var(--w, 240px);
      --ring: rgba(10, 18, 28, .35);
    }

    .hero .device,
    .section--deep .device,
    :root[data-theme="dark"] .device {
      --ring: rgba(255, 255, 255, .14);
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .device {
        --ring: rgba(255, 255, 255, .14);
      }
    }

    .device__body {
      position: relative;
      box-shadow:
        inset 0 0 0 .45cqw rgba(255, 255, 255, .12),
        0 0 0 1px var(--ring),
        var(--device-shadow, 0 24px 50px rgba(8, 14, 22, .28));
    }

    .device__screen {
      position: relative;
      overflow: hidden;
      background: #000;
    }

    .device__screen img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .device--phone .device__body {
      padding: 3.6cqw;
      border-radius: 16.4cqw;
      background: linear-gradient(150deg, #454B53 0%, #1A1D22 30%, #0C0E11 100%);
    }

    .device--phone .device__screen {
      aspect-ratio: 1206 / 2622;
      border-radius: 12.8cqw;
    }

    .device--phone .device__screen::after {
      content: "";
      position: absolute;
      top: 2.6cqw;
      left: 50%;
      width: 29cqw;
      height: 8.6cqw;
      transform: translateX(-50%);
      border-radius: 99px;
      background: #000;
    }

    .device--phone .device__body::before,
    .device--phone .device__body::after {
      content: "";
      position: absolute;
      width: 1.1cqw;
      border-radius: 1cqw;
      background: linear-gradient(90deg, #2C3138, #5A616A);
    }

    .device--phone .device__body::before {
      right: -.9cqw;
      top: 27%;
      height: 12%;
    }

    .device--phone .device__body::after {
      left: -.9cqw;
      top: 21%;
      height: 6.5%;
      box-shadow: 0 9cqw 0 #3A4047;
    }

    .device--watch .device__body {
      padding: 7cqw;
      border-radius: 26cqw;
      background: linear-gradient(145deg, #E6E1D8 0%, #B9B2A6 35%, #8A8378 70%, #C7C0B4 100%);
    }

    .device--watch .device__screen {
      aspect-ratio: 416 / 496;
      border-radius: 18cqw;
      box-shadow: 0 0 0 1.6cqw #000;
    }

    .device--watch .device__body::before,
    .device--watch .device__body::after {
      content: "";
      position: absolute;
      border-radius: 1.6cqw;
    }

    .device--watch .device__body::before {
      right: -4.2cqw;
      top: 20%;
      width: 5.2cqw;
      height: 19%;
      background: repeating-linear-gradient(180deg, #D8D2C8 0 .8cqw, #8E877C .8cqw 1.6cqw);
    }

    .device--watch .device__body::after {
      right: -2.2cqw;
      top: 52%;
      width: 2.8cqw;
      height: 22%;
      background: linear-gradient(90deg, #8E877C, #CFC8BC);
    }

    .device--watch::before,
    .device--watch::after {
      content: "";
      position: absolute;
      left: 13%;
      right: 13%;
      height: 30%;
      z-index: -1;
      background: linear-gradient(90deg, #121B27, #253447 50%, #121B27);
    }

    .device--watch::before {
      bottom: 92%;
      border-radius: 14cqw 14cqw 3cqw 3cqw;
    }

    .device--watch::after {
      top: 92%;
      border-radius: 3cqw 3cqw 14cqw 14cqw;
    }

    .hero__devices {
      display: flex;
      justify-content: center;
      padding-block: 30px 46px;
      --device-shadow: 0 40px 80px rgba(0, 0, 0, .5);
    }

    .hero__stack {
      position: relative;
      width: clamp(210px, 22vw, 280px);
    }

    .hero__stack .device--phone {
      --w: 100%;
    }

    .hero__stack .device--watch {
      --w: 50%;
      position: absolute;
      right: -30%;
      bottom: 9%;
    }

    @media (max-width: 980px) {
      .hero__stack .device--watch {
        right: -22%;
      }
    }

    .pillar {
      overflow: hidden;
    }

    .pillar__shot {
      display: flex;
      justify-content: center;
      height: clamp(220px, 21vw, 270px);
      margin: 6px calc(-1 * clamp(24px, 2.6vw, 34px)) calc(-1 * clamp(24px, 2.6vw, 34px));
      padding-top: 22px;
      overflow: hidden;
      background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 10%, transparent));
    }

    .pillar__shot .device {
      --w: min(66%, 230px);
      transition: transform 700ms var(--ease), opacity 700ms var(--ease);
    }

    @media (hover: hover) {
      .pillar:hover .pillar__shot .device {
        transform: translateY(-16px);
      }
    }

    .compat__shot {
      display: flex;
      justify-content: center;
      height: clamp(250px, 25vw, 330px);
      overflow: hidden;
    }

    .compat__shot .device {
      --w: clamp(220px, 22vw, 280px);
      --device-shadow: 0 30px 60px rgba(0, 0, 0, .45);
      transition: transform 700ms var(--ease), opacity 700ms var(--ease);
    }

    .shots {
      background: var(--bg-alt);
      padding-block: clamp(24px, 3vw, 40px);
    }

    .shots__viewport {
      overflow-x: auto;
      scrollbar-width: none;
      padding-block: 56px;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }

    .shots__viewport::-webkit-scrollbar {
      display: none;
    }

    .shots__track {
      display: flex;
      align-items: center;
      width: max-content;
    }

    .shots__viewport:not(.is-drifting) .shots__track {
      margin-inline: auto;
      padding-inline: max(var(--gut), 7vw);
    }

    .shots__track>.device {
      margin-right: clamp(26px, 3.4vw, 46px);
    }

    .shots__track .device--phone {
      --w: clamp(170px, 16vw, 210px);
    }

    .shots__track .device--watch {
      --w: clamp(118px, 11vw, 140px);
    }

    @media (prefers-reduced-motion: no-preference) {
      .hero__stack {
        animation: device-rise 900ms var(--ease) both;
      }

      .hero__stack .device--phone {
        animation: device-float 7s ease-in-out infinite alternate;
      }

      .hero__stack .device--watch {
        --float: -16px;
        animation: device-float 6s ease-in-out -3s infinite alternate;
      }

      .js-reveal [data-reveal]:not(.is-in) .device {
        opacity: 0;
        transform: translateY(70px);
      }

      .shots__viewport.is-drifting {
        overflow: hidden;
      }

      .is-drifting .shots__track {
        animation: shots-drift 60s linear infinite;
      }

      .is-drifting:hover .shots__track {
        animation-play-state: paused;
      }
    }

    @keyframes device-rise {
      from {
        opacity: 0;
        transform: translateY(36px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes device-float {
      from {
        transform: translateY(0);
      }

      to {
        transform: translateY(var(--float, -12px));
      }
    }

    @keyframes shots-drift {
      to {
        transform: translateX(calc(-100% / 3));
      }
    }

    .hero__bg {
      background:
        linear-gradient(90deg, rgba(16, 30, 47, .9) 0%, rgba(16, 30, 47, .82) 40%, rgba(16, 30, 47, .4) 62%, rgba(16, 30, 47, .3) 100%),
        url("assets/hero/hero.webp") center/cover no-repeat,
        var(--navy-700);
    }

    .hero__half,
    .hero__seam {
      display: none;
    }

    @media (max-width: 980px) {
      .hero__bg {
        background:
          linear-gradient(rgba(16, 30, 47, .84), rgba(16, 30, 47, .84)),
          url("assets/hero/hero.webp") center/cover no-repeat,
          var(--navy-700);
      }
    }

    #compat {
      background:
        linear-gradient(rgba(16, 30, 47, .82), rgba(16, 30, 47, .82)),
        url("assets/sections/compat.webp") center/cover no-repeat,
        var(--bg-deep);
    }

    .indie__photo {
      margin: 32px 0 0;
      aspect-ratio: 3 / 2;
      border-radius: var(--radius-l);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }

    .indie__photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  


.navlinks {
  flex: none;
}

.topbar__title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}

.topbar.is-titled .topbar__title {
  opacity: 1;
  transform: none;
}

.langs {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
}

.langs a,
.langs span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--ink-2);
}

.langs span {
  background: var(--surface-2);
  color: var(--ink);
}

.langs a:hover {
  text-decoration: none;
  background: var(--surface-2);
}

.postHead {
  position: relative;
  color: #fff;
  padding-block: clamp(56px, 8vw, 110px) clamp(40px, 6vw, 80px);
}

.postHead .eyebrow {
  color: rgba(255, 255, 255, .72);
}

.postHead h1 {
  font-size: clamp(32px, 5vw, 56px);
  max-width: 22ch;
  margin-top: 14px;
}

.postHead .lead {
  margin-top: 20px;
  max-width: 60ch;
  color: rgba(255, 255, 255, .82);
}

.postHead__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}

.postHead__meta .post__tag {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}

.postHead__meta .eyebrow {
  margin-bottom: 0;
}

.postHead__author a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .35);
}

.prose {
  max-width: 70ch;
  margin-inline: auto;
  padding-block: clamp(40px, 6vw, 80px);
  font-size: 18px;
  line-height: 1.72;
}

.prose>*+* {
  margin-top: 1.1em;
}

article .prose>p:first-of-type::first-letter {
  float: left;
  font-size: 4.2em;
  line-height: .8;
  font-weight: 800;
  margin: .07em .09em 0 0;
  color: var(--ink);
}

.prose h2 {
  font-size: clamp(24px, 3vw, 30px);
  margin-top: 2em;
}

.prose h3 {
  font-size: 21px;
  margin-top: 1.6em;
}

.prose p,
.prose li {
  color: var(--ink-2);
}

.prose strong {
  color: var(--ink);
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li+li {
  margin-top: .45em;
}

.prose blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--brand);
  font-style: italic;
}

.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .86em;
  background: var(--surface-2);
  padding: .1em .35em;
  border-radius: 5px;
}

.prose pre {
  background: var(--navy-900);
  color: #E6EDF5;
  padding: 18px 20px;
  border-radius: var(--radius-m);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
}

.prose pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.prose hr {
  border: 0;
  text-align: center;
  margin-block: 2.4em;
}

.prose hr::after {
  content: "· · ·";
  letter-spacing: .6em;
  color: var(--ink-3);
}

.tableWrap {
  overflow-x: auto;
}

.prose table {
  border-collapse: collapse;
  font-size: 16px;
  min-width: 60%;
}

.prose th,
.prose td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.prose th {
  color: var(--ink);
  font-weight: 700;
}

.prose td {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.prose math {
  font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math;
  color: var(--ink);
}

.equation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 24px;
  align-items: center;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  overflow-x: auto;
  font-size: 20px;
}

.equation__lhs {
  grid-column: 1 / -1;
}

.equation__term {
  padding-left: 1.4em;
  white-space: nowrap;
}

.equation__name {
  font-size: 13px;
  color: var(--ink-3);
}

@media (max-width: 600px) {
  .equation {
    grid-template-columns: 1fr;
    gap: 2px;
    font-size: 17px;
  }

  .equation__name {
    padding-left: 1.7em;
    margin-bottom: 8px;
  }
}

.figPlaceholder {
  border: 2px dashed var(--line);
  border-radius: var(--radius-m);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  background: var(--surface);
}

.figPlaceholder b {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.closingShots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 28px);
  padding-top: 8px;
}

.closingShots__icon {
  width: clamp(72px, 10vw, 104px);
  height: auto;
  border-radius: 22.5%;
  box-shadow: var(--shadow);
}

.closingShots .device {
  --w: clamp(104px, 16vw, 160px);
}

.postFoot {
  max-width: 70ch;
  margin-inline: auto;
  padding-bottom: clamp(48px, 7vw, 96px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.diaryIndex {
  padding-block: clamp(32px, 4vw, 56px) clamp(48px, 7vw, 96px);
}

.diaryIndex .posts {
  margin-top: clamp(28px, 4vw, 48px);
}

.legalPage {
  padding-block: clamp(32px, 4vw, 56px) clamp(48px, 7vw, 96px);
}

.legalPage .prose {
  padding-block: 0;
}

.legalPage h1 {
  font-size: clamp(30px, 4.4vw, 46px);
}

.diagram {
  margin: 36px 0;
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.diagram text {
  fill: var(--ink);
  font-family: inherit;
  font-size: 16px;
}

.diagram .d-small {
  fill: var(--ink-3);
  font-size: 14px;
}

.diagram .d-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.diagram .d-strong {
  font-weight: 700;
}

.diagram .d-box {
  fill: var(--surface-2);
  stroke: var(--line);
  stroke-width: 2;
}

.diagram .d-inner {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 2;
}

.diagram .d-line {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
}

.diagram .d-dash {
  stroke-dasharray: 6 6;
}

.diagram .d-hot {
  stroke: var(--brand);
}

.diagram .d-arrow,
.diagram .d-dot {
  fill: var(--ink-3);
}

.diagram .d-arrow-hot,
.diagram .d-hot-fill {
  fill: var(--brand);
}

.diagram .d-axis {
  stroke: var(--line);
  stroke-width: 1.5;
}

.diagram .d-grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.diagram figcaption,
.figShot figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}

.figShot {
  width: min(240px, 64%);
  margin: 40px auto;
}

.figShot .device {
  width: 100%;
}

.figPhoto {
  margin: 36px 0;
}

.figPhoto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}