@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
:root {
  --text-base: clamp(15px, 0.9rem + 0.15vw, 17px);
  --text-lead: clamp(18px, 1rem + 0.5vw, 22px);
  --display-m: clamp(30px, 1.2rem + 2.6vw, 56px);
  --display-l: clamp(40px, 1.4rem + 4.4vw, 88px);
  --display-stretch: 90%;
  --display-tracking: -0.02em;
  --gutter: clamp(16px, 4.4vw, 72px);
  --bar-height: clamp(56px, 4.2vw + 36px, 80px);   
  --measure: 34ch;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-arrive: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-drop: cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast: 180ms; --dur-base: 480ms; --dur-slow: 800ms;
  --magenta: var(--accent-ink);   
}
@media (max-width: 599px) { :root { --bar-height: 70px; } }   
:root {
  --ink: #0A0C11;  --grey: #5D6470;  --hairline: #E4E7EC;  --mist: #F4F6F9;  --paper: #FFFFFF;
  --accent: #FFBF7E;             
  --accent-ink: var(--ink);      
  --on-accent: var(--ink);       
  --on-ink: var(--paper);                                           
  --on-ink-muted: var(--hairline);                                  
  --rule-on-ink: color-mix(in srgb, var(--paper) 22%, var(--ink)); 
  --scrim: color-mix(in srgb, var(--ink) 40%, transparent);        
}
:root {
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo", "Instrument Sans", system-ui, sans-serif;
  --k-archivo: -0.352;
  --k-instrument: -0.36;
}
:root {
  --fs-h1: 52px;  --lh-h1: 56px;  --ls-h1: -0.022em;
  --fs-h2: 40px;  --lh-h2: 44px;  --ls-h2: -0.018em;
  --fs-h3: 20px;  --lh-h3: 28px;  --ls-h3: -0.01em;
  --fs-lead: 20px; --lh-lead: 30px;
  --fs-body: 16px; --lh-body: 26px;
  --fs-ui: 15px;  --lh-ui: 22px;
  --fs-label: 13px; --lh-label: 18px; --ls-label: 0.02em;
  --fs-small: 13px; --lh-small: 20px;
  --ws-display: 0.04em;          
  --measure-body: 32rem;         
  --measure-lead: 34rem;         
  --measure-h2: 18em;
  --measure-band: 12em;
  --measure-h1: 15em;
}
@media (600px <= width < 1200px) {
  :root {
    --fs-h1: 44px; --lh-h1: 48px; --ls-h1: -0.02em;
    --fs-h2: 32px; --lh-h2: 36px; --ls-h2: -0.016em;
  }
}
@media (width < 600px) {
  :root {
    --fs-h1: 32px; --lh-h1: 36px; --ls-h1: -0.016em;
    --fs-h2: 24px; --lh-h2: 28px; --ls-h2: -0.012em;
    --fs-h3: 18px; --lh-h3: 24px; --ls-h3: -0.005em;
    --fs-lead: 18px; --lh-lead: 28px;
    --lh-body: 24px;
    --ws-display: 0.03em;
  }
}
:root {
  --space-20: 80px;
  --space-24: 96px;
  --carry-y: 48px;        
  --statement-y: 64px;    
  --section-y: 80px;      
  --page-head-y: 64px;    
  --seam-y: 48px;         
  --gap-label: 12px;      
  --gap-lead: 16px;       
  --gap-action: 32px;     
  --gap-content: 48px;    
  --gap-block: 32px;      
  --row-y: 16px;          
  --cell-x: 24px;         
  --col-gap: 48px;        
  --topbar-h: 64px;       
  --wrap-max: 1776px;     
}
@media (width >= 1200px) and (max-height: 760px) { :root { --section-y: 64px; } }
@media (900px <= width < 1200px) {
  :root { --section-y: 64px; --page-head-y: 48px; --col-gap: 32px; }
}
@media (600px <= width < 900px) {
  :root { --statement-y: 48px; --section-y: 64px; --page-head-y: 48px; --col-gap: 32px; }
}
@media (width < 600px) {
  :root {
    --carry-y: 32px; --statement-y: 48px; --section-y: 48px; --page-head-y: 32px;
    --gap-action: 24px; --gap-content: 32px; --gap-block: 24px;
    --row-y: 12px; --cell-x: 0px; --col-gap: 0px;
    --topbar-h: 56px;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --topbar-h: 48px;
    --page-head-y: 24px;
    --fs-h1: 32px; --lh-h1: 36px; --ls-h1: -0.016em;
    --fs-h2: 24px; --lh-h2: 28px; --ls-h2: -0.012em;
  }
}
:root {
  --cap-h1: calc(var(--lh-h1) / 2 + var(--fs-h1) * var(--k-archivo));
  --cap-h2: calc(var(--lh-h2) / 2 + var(--fs-h2) * var(--k-archivo));
  --cap-lead: calc(var(--lh-lead) / 2 + var(--fs-lead) * var(--k-instrument));
  --cap-h3: calc(var(--lh-h3) / 2 + var(--fs-h3) * var(--k-instrument));
  --cap-body: calc(var(--lh-body) / 2 + var(--fs-body) * var(--k-instrument));
  --head-top: calc(var(--lh-label) + var(--gap-label));   
  --head-top-kicker: calc(var(--lh-h3) + var(--gap-label));   
}
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 16px);
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
::selection { background: var(--ink); color: var(--paper); }
.on-ink ::selection { background: var(--paper); color: var(--ink); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
main:focus { outline: none; }
.bl, .bl0 { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
  transition: color var(--dur-fast) var(--ease-arrive);
}
.link:hover { color: var(--accent-ink); }
.nowrap { white-space: nowrap; }
.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  padding: 0 var(--space-4);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
}
.skip:focus-visible { transform: none; outline-offset: -4px; outline-color: var(--paper); }
.wrap {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--wrap-max);
  margin-inline: auto;
}
.row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-block); }
.row > * { min-width: 0; }
@media (width >= 900px) {
  .row { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0; }
  .row > .c7 { grid-column: span 7; padding-right: var(--col-gap); }
  .row > .c5 { grid-column: span 5; }
  .row > .c4 { grid-column: span 4; padding-right: var(--col-gap); }
  .row > .c8 { grid-column: span 8; }
  .row > .c12 { grid-column: 1 / -1; }
}
.sec { padding-bottom: var(--sec-b, var(--section-y)); }
.sec > .wrap { padding-top: var(--sec-t, var(--section-y)); }
.sec--rule > .wrap { border-top: 1px solid var(--hairline); }
.sec--carry { --sec-t: var(--carry-y); }
.sec--statement { --sec-t: var(--statement-y); --sec-b: var(--statement-y); }
.sec--end-statement { --sec-b: var(--statement-y); }
.sec--ink { background: var(--ink); color: var(--on-ink); }
.page-head > .wrap { padding-block: var(--page-head-y); }
@media (width >= 900px) {
  .at-h1-btn   { padding-top: calc(var(--head-top) + var(--cap-h1)); }                       
  .at-h2-btn   { padding-top: calc(var(--head-top) + var(--cap-h2)); }                       
  .at-h1-body  { padding-top: calc(var(--head-top) + var(--cap-h1) - var(--cap-body)); }     
  .at-h2-h3    { padding-top: calc(var(--head-top) + var(--cap-h2) - var(--cap-h3)); }      
  .at-h1-lead  { padding-top: calc(var(--head-top) + var(--cap-h1) - var(--cap-lead)); }     
  .at-h2-lead  { padding-top: calc(var(--head-top) + var(--cap-h2) - var(--cap-lead)); }     
  .atk-h1-btn  { padding-top: calc(var(--head-top-kicker) + var(--cap-h1)); }                
  .atk-h1-lead { padding-top: calc(var(--head-top-kicker) + var(--cap-h1) - var(--cap-lead)); } 
  .at-h1-btn--nolabel { padding-top: var(--cap-h1); }                                        
  .at-h2-btn--nolabel { padding-top: var(--cap-h2); }
}
.h1, .h2, .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: var(--display-stretch);
  word-spacing: var(--ws-display);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); max-width: var(--measure-h1); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); max-width: var(--measure-h2); }
.h3 {
  font-family: var(--font-text);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: 600;
  text-wrap: balance;
}
.name { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.005em; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: var(--measure-lead); text-wrap: pretty; }
.lead--balance { text-wrap: balance; }   
.body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure-body); text-wrap: pretty; }
.meta { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--grey); text-wrap: pretty; }
.meta--ink { color: var(--ink); }
.label, .num {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}
.small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--grey); text-wrap: pretty; }
.strong { font-weight: 600; }
.label + .h1, .label + .h2 { margin-top: var(--gap-label); }
.kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: var(--display-stretch);
  word-spacing: var(--ws-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.kicker + .h1 { margin-top: var(--gap-label); }
@media (width < 600px) { .kicker__s { display: block; } }
.h1 + .lead, .h2 + .lead { margin-top: var(--gap-lead); }
.on-ink { color: var(--on-ink); }
.on-ink .label, .on-ink .num, .on-ink .meta, .on-ink .small { color: var(--on-ink-muted); }
.stop { color: transparent; }
.stop::before {
  content: "";
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  margin-left: 0.03em;
  margin-right: -0.2em;          
  vertical-align: baseline;      
  background: var(--accent);
}
.key {
  display: grid;
  grid-template-columns: 7px minmax(0, var(--measure-body));
  column-gap: var(--space-3);
  align-items: baseline;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--ink);
  text-wrap: pretty;
}
.key::before { content: ""; width: 7px; height: 7px; background: var(--accent); translate: 0 -1px; }
.key--plain { font-weight: 400; }
.rule-ink { border-top: 1px solid var(--ink); }
.rule-hair { border-top: 1px solid var(--hairline); }
.on-ink .rule-ink { border-top-color: var(--paper); }
.marks > li {
  display: grid;
  grid-template-columns: 7px minmax(0, var(--measure-body));   
  column-gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--row-y);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
.marks > li::before { content: ""; width: 7px; height: 7px; background: var(--ink); translate: 0 -1px; }
.marks--no > li { color: var(--grey); }
.marks > li.is-key { font-weight: 600; }
.marks > li.is-key::before { background: var(--accent); }
.marks--no > li::before { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.rows > li {
  padding-block: var(--row-y);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
.steps > li {
  display: grid;
  grid-template-columns: 40px minmax(0, var(--measure-body));
  align-items: baseline;
  padding-block: var(--row-y);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
.steps > li:last-child { border-bottom: 0; }
.steps strong { font-weight: 600; }
.on-ink .steps > li { border-bottom-color: var(--rule-on-ink); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-text);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 0;
  transition: background-color var(--dur-fast) var(--ease-arrive), color var(--dur-fast) var(--ease-arrive);
}
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--paper); } }
.btn:focus-visible { outline-color: var(--ink); outline-offset: 3px; }
@media (hover: hover) { .on-ink .btn:hover { background: var(--paper); color: var(--ink); } }
.on-ink .btn:focus-visible { outline-color: var(--accent); }
.btn--ink { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .btn--ink:hover { background: var(--grey); color: var(--paper); } }
@media (width < 600px) {
  .action .btn, .panel .btn { display: flex; width: 100%; max-width: var(--measure-body); height: 48px; }
}
.action { display: grid; justify-items: start; }
.action > .btn { justify-self: stretch; max-width: max-content; }
@media (width < 600px) { .action > .btn { max-width: var(--measure-body); } }
.mail {
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.42em;          
  text-underline-offset: -0.28em;
  text-decoration-skip-ink: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-arrive), text-decoration-thickness var(--dur-fast) var(--ease-arrive);
}
.mail:hover { text-decoration-thickness: 0.62em; }
.mail--wrap { white-space: normal; }
.on-ink .mail { color: var(--on-ink); text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.on-ink .mail:hover, .panel .mail:hover { color: inherit; text-decoration-thickness: 3px; }
.panel .mail:hover { color: var(--ink); }
.tlink {
  display: inline-flex;
  align-items: baseline;
  column-gap: var(--space-2);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.tlink > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-fast) var(--ease-arrive), color var(--dur-fast) var(--ease-arrive);
}
.tlink::after { content: "→"; font-family: var(--font-text); transition: translate var(--dur-fast) var(--ease-arrive); }
@media (hover: hover) { .tlink:hover { color: var(--grey); } }
@media (hover: hover) { .tlink:hover::after { translate: 3px 0; } }
.on-ink .tlink { color: var(--on-ink); }
.on-ink .tlink > span { text-decoration-color: var(--paper); }
@media (hover: hover) { .on-ink .tlink:hover { color: var(--on-ink); } }
.on-ink .tlink:hover > span { text-decoration-thickness: 2px; }
@media (pointer: coarse), (width < 900px) {
  .tlink, .contact-block .mail {
    display: inline-block;
    line-height: var(--lh-ui);
    padding-block: 11px;
    margin-block: -11px;
  }
  .tlink { display: inline-flex; }
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  background: var(--paper);
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow var(--dur-fast) var(--ease-arrive);
}
.topbar.is-scrolled, .topbar.is-open { box-shadow: inset 0 -1px 0 var(--hairline); }
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 100%;
}
.brand {
  --mark-w: 23px; --mark-h: 16px; --mark-gap: 10px;
  display: inline-flex;
  align-items: center;
  gap: var(--mark-gap);
  align-self: stretch;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
}
.brand svg { width: var(--mark-w); height: var(--mark-h); flex: none; }
.mark__ink { fill: var(--ink); }
.mark__stop { fill: var(--accent); }
.brand__name { display: inline-block; }
.js .topbar--home .brand svg {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity var(--dur-base) var(--ease-move), clip-path var(--dur-base) var(--ease-move);
}
.js .topbar--home .brand__name { translate: calc(-1 * (var(--mark-w) + var(--mark-gap))) 0; transition: translate var(--dur-base) var(--ease-move); }
.js .topbar--home.is-past .brand svg { opacity: 1; clip-path: inset(0 0 0 0); }
.js .topbar--home.is-past .brand__name { translate: 0 0; }
.topbar__nav { display: flex; align-items: center; gap: var(--space-8); }
.topbar__links { display: flex; align-items: center; gap: var(--space-8); }
.topbar__links > a:not(.btn) {
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-arrive);
}
@media (hover: hover) { .topbar__links > a:not(.btn):hover { color: var(--grey); } }
.topbar__links > a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.topbar__btn { position: relative; height: 36px; padding: 0 14px; }
.topbar__btn[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.topbar__btn[aria-current="page"]:hover { background: var(--paper); color: var(--grey); }
.menu-btn { display: none; }
@media (width < 600px) {
  .brand { --mark-w: 20px; --mark-h: 14px; }
  .topbar__nav { gap: var(--space-2); }
  .topbar__btn { height: 44px; }
  .js .menu-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 var(--space-1);
    font-size: var(--fs-ui);
    font-weight: 500;
  }
  .js .topbar__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--gutter) var(--space-4);
    background: var(--paper);
    box-shadow: inset 0 -1px 0 var(--hairline);
  }
  .js .topbar.is-open .topbar__links { display: flex; }
  .js .topbar.is-open::after {       
    content: "";
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    z-index: -1;
    background: var(--scrim);
  }
  .js .topbar__links > a:not(.btn) {
    display: flex;
    align-items: center;
    height: 56px;
    font-size: 17px;
    border-bottom: 1px solid var(--hairline);
  }
  html:not(.js) .topbar { height: auto; }
  html:not(.js) .topbar__in { flex-wrap: wrap; padding-block: var(--space-3); row-gap: var(--space-2); }
}
@media (width < 360px) {
  .brand { font-size: 14px; }
  .topbar__btn { padding: 0 10px; }
}
@media (orientation: landscape) and (max-height: 500px), (pointer: coarse) and (width >= 600px) {
  .topbar__btn::after { content: ""; position: absolute; inset: -4px 0; }
}
@media (pointer: coarse) and (width >= 600px), (orientation: landscape) and (max-height: 500px) {
  .topbar__links > a:not(.btn) { display: inline-block; padding: 11px 3px; margin: -11px -3px; }   
}
.initials {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  font-stretch: var(--display-stretch);
  letter-spacing: 0.04em;
  line-height: 1;
}
.initials--48 { width: 48px; height: 48px; font-size: 16px; }
.initials--56 { width: 56px; height: 56px; font-size: 18px; }
.initials--open { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.on-ink .initials { background: var(--paper); color: var(--ink); }
.panel { padding: var(--space-8); background: var(--mist); }
@media (width < 600px) { .panel { padding: var(--space-6); } }
.band > .wrap { padding-block: var(--statement-y); }
.band .h2 { color: var(--on-ink); }
@media (width >= 900px) { .band .h2 { max-width: var(--measure-band); } }
@media (width < 900px) { .band .row { row-gap: var(--gap-action); } }
main.home { flex-direction: column; position: relative; }
.home .hero {
  flex: none;
  --pb: var(--space-12);                                                        
  --c: calc(100vw - 2 * var(--gutter));                                         
  --frame-w: min(var(--c), (100svh - var(--bar-height) - 190px) * 3468 / 1300); 
  --old-content: calc(var(--frame-w) * 1300 / 3468);                            
  --peek: 76.5px;                                                               
  min-height: calc(100svh - var(--bar-height) - var(--peek));
  margin-top: calc(var(--bar-height) - var(--topbar-h));
  padding-right: calc(var(--gutter) - (100vw - 100%));
}
.js .home .hero {
  justify-content: flex-start;
  padding-top: calc(var(--space-6) + max(0px, (100svh - var(--bar-height) - var(--peek) - var(--space-6) - var(--pb) - var(--old-content)) / 2));
}
@media (width < 1170px) { .home .hero { --peek: 104px; } }
@media (width < 595px)  { .home .hero { --peek: 131.5px; } }
@media (width < 540px)  { .home .hero { --peek: 151px; } }
@media (width < 512px)  { .home .hero { --peek: 170.5px; } }
@media ((max-width: 899px) and (orientation: portrait)) or ((max-width: 700px) and (max-height: 420px)) {
  .home .hero {
    --pb: clamp(20px, 4svh, 88px);
    --k: 320px;
    --frame-w: max(min(var(--c), (100svh - var(--bar-height) - var(--k)) * 3468 / 2500), min(var(--c), 240px));
    --fs-s: var(--display-m);                      
    --lines-s: 1;
    --fs-c: var(--text-lead);                      
    --contact-h: calc(1.5 * var(--fs-c) + clamp(0px, (14.3125 * var(--fs-c) - var(--frame-w)) * 10000, 1.5 * var(--fs-c)));
    --old-content: calc(var(--frame-w) * 2500 / 3468 + var(--space-8) + var(--lines-s) * 1.02 * var(--fs-s) + var(--space-6) + var(--contact-h));
    --peek: 107.5px;
  }
}
@media (max-width: 599px) and (orientation: portrait) { .home .hero { --k: 350px; } }
@media (orientation: landscape) and (max-height: 500px) { .home .hero { --fs-s: 30px; } }
@media (max-width: 899px) and (orientation: portrait) and (width < 533px) { .home .hero { --lines-s: 2; } }
@media (max-width: 700px) and (max-height: 420px) and (orientation: landscape) and (width < 484px) { .home .hero { --lines-s: 2; } }
@media (((max-width: 899px) and (orientation: portrait)) or ((max-width: 700px) and (max-height: 420px))) and (width < 540px) { .home .hero { --peek: 127px; } }
@media (((max-width: 899px) and (orientation: portrait)) or ((max-width: 700px) and (max-height: 420px))) and (width < 512px) { .home .hero { --peek: 146.5px; } }
@media not (((max-width: 899px) and (orientation: portrait)) or ((max-width: 700px) and (max-height: 420px)) or ((orientation: landscape) and (max-height: 500px))) {
  .js .home .hero__statement { font-size: min(112px, max(var(--display-m), 4.6cqw), calc((100vw - 2 * var(--gutter) - 58.333cqw) / 9.5)); }
}
.home .hero__contact { display: flex; flex-direction: column; align-items: flex-start; text-wrap: pretty; }
.home .hero__contact .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: var(--space-6);
  padding: 0 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-arrive), color var(--dur-fast) var(--ease-arrive);
}
@media (hover: hover) { .home .hero__contact .link:hover { background: var(--ink); color: var(--paper); } }
.home .hero__status { display: block; margin-top: var(--space-3); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--grey); }
.home .hero__contact .link:focus-visible { outline-color: var(--ink); outline-offset: 3px; }
@media (width < 600px) { .home .hero__contact .link { align-self: stretch; max-width: var(--measure-body); height: 48px; } }
@media not (((max-width: 899px) and (orientation: portrait)) or ((max-width: 700px) and (max-height: 420px))) {
  .js .home .hero__contact { width: max-content; }
}
@media ((max-width: 899px) and (orientation: portrait)) or ((max-width: 700px) and (max-height: 420px)) {
  .home .hero__contact { width: calc(100vw - 2 * var(--gutter)); }
}
@media ((max-height: 600px) or (max-width: 899px)) and (not (((max-width: 899px) and (orientation: portrait)) or ((max-width: 700px) and (max-height: 420px)))) {
  .js .home .hero__contact {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: min(50ch, calc(100vw - 2 * var(--gutter)));
    margin-top: var(--space-4);
  }
  .home .hero__contact .link { margin-top: var(--space-4); }
}
:root {
  --c-ink-2: #151922;                                            
  --c-ink-3: #232833;                                            
  --c-rule-ink: color-mix(in srgb, var(--paper) 16%, var(--ink)); 
  --c-soft-ink: color-mix(in srgb, var(--paper) 70%, var(--ink)); 
  --c-bar: #E9ECF1;                                              
  --c-mist-2: #EDF0F4;                                           
  --c-shadow: 0 1px 1px rgb(10 12 17 / 0.04), 0 3px 8px -3px rgb(10 12 17 / 0.07), 0 26px 48px -26px rgb(10 12 17 / 0.30);
  --c-shadow-lo: 0 1px 1px rgb(10 12 17 / 0.04), 0 10px 22px -14px rgb(10 12 17 / 0.26);
  --c-shadow-ink: 0 1px 0 rgb(10 12 17 / 0.4), 0 34px 60px -30px rgb(0 0 0 / 0.75);
  --c-h2: 48px; --c-h2-lh: 52px; --c-h2-ls: -0.024em;
  --c-h3: 20px; --c-h3-lh: 28px;
  --c-lead: 20px; --c-lead-lh: 31px;
  --c-body: 17px; --c-body-lh: 28px;
  --c-label: 12px; --c-label-lh: 16px; --c-label-ls: 0.14em;
  --c-ob: 14px; --c-ob-lh: 20px;       
  --c-ob-k: 13px;                       
  --c-fold-y: 120px;
  --c-gap: 24px;                        
  --c-head-gap: 64px;                   
  --c-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --c-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 160ms;     
  --t-base: 280ms;     
  --t-slow: 480ms;     
  --t-draw: 800ms;     
  --t-stagger: 60ms;   
  --t-beat: 120ms;     
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);    
  --e-move: cubic-bezier(0.65, 0, 0.35, 1);  
  --t-rise: 16px;
  --c-lift-back: 0 1px 1px rgb(10 12 17 / 0.04), 0 12px 24px -12px rgb(10 12 17 / 0.14);
  --c-lift-front: 0 1px 1px rgb(10 12 17 / 0.05), 0 6px 12px -6px rgb(10 12 17 / 0.10), 0 28px 56px -28px rgb(10 12 17 / 0.24);
  --c-lift-hover: 0 1px 1px rgb(10 12 17 / 0.05), 0 10px 18px -8px rgb(10 12 17 / 0.14), 0 36px 64px -28px rgb(10 12 17 / 0.30);
  --c-lift-inkobj: inset 0 1px 0 rgb(255 255 255 / 0.09), inset 0 0 0 1px rgb(255 255 255 / 0.06),
                   0 1px 2px rgb(10 12 17 / 0.25), 0 24px 48px -20px rgb(10 12 17 / 0.45);   
  --c-lift-onink: 0 0 0 1px rgb(255 255 255 / 0.08), 0 2px 4px rgb(0 0 0 / 0.35), 0 32px 64px -24px rgb(0 0 0 / 0.65);   
  --c-glass-lt: rgb(255 255 255 / 0.66);
  --c-glass-ink: rgb(14 17 24 / 0.62);
  --c-blur: blur(18px) saturate(140%);
  --c-glass-lt-edge: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 0 0 1px rgb(255 255 255 / 0.55);
  --c-glass-ink-edge: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 1px rgb(255 255 255 / 0.10);
  --c-stroke: 1px;
  --c-hair2: 1px;
}
@media (min-resolution: 2dppx) { :root { --c-stroke: 1.5px; --c-hair2: 0.5px; } }
@media (width < 1200px) { :root { --c-h2: 40px; --c-h2-lh: 44px; --c-fold-y: 104px; --c-head-gap: 56px; } }
@media (width < 900px)  { :root { --c-h2: 34px; --c-h2-lh: 38px; --c-fold-y: 88px; --c-head-gap: 48px; } }
@media (width < 600px)  {
  :root {
    --c-h2: 28px; --c-h2-lh: 32px; --c-h2-ls: -0.018em;
    --c-h3: 18px; --c-h3-lh: 25px;
    --c-lead: 18px; --c-lead-lh: 28px;
    --c-body: 16px; --c-body-lh: 26px;
    --c-fold-y: 72px; --c-head-gap: 36px; --c-gap: 16px;
  }
}
@media (orientation: landscape) and (max-height: 500px) { :root { --c-fold-y: 56px; --c-head-gap: 32px; } }
.sx { position: relative; padding-block: var(--c-fold-y); }
.sx--mist { background: var(--mist); }
.sx--ink { background: var(--ink); color: var(--paper); }
.sx--accent { background: var(--accent); color: var(--ink); }
.sx[tabindex="-1"]:focus { outline: none; }
.grid12 { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--c-gap); }
@media (width >= 900px) { .grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.sx-label {
  display: flex; align-items: center; column-gap: 12px;
  font-family: var(--font-display); font-stretch: 118%; font-size: var(--c-label); line-height: var(--c-label-lh); letter-spacing: 0.1em;
  font-weight: 600; text-transform: uppercase; color: var(--grey);
}
.sx-label::before {
  content: attr(data-i);
  font-family: var(--font-display); font-stretch: 100%; font-weight: 700; letter-spacing: 0.04em;
  font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.sx-label > span { display: inline-flex; align-items: center; column-gap: 12px; }
.sx-label > span::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.6; }
.sx--ink .sx-label { color: var(--c-soft-ink); }
.sx--ink .sx-label::before { color: var(--paper); }
.sx-h2 {
  font-family: var(--font-display); font-weight: 600; font-stretch: var(--display-stretch);
  font-size: var(--c-h2); line-height: var(--c-h2-lh); letter-spacing: var(--c-h2-ls);
  word-spacing: var(--ws-display); text-wrap: balance; max-width: 16em;
}
.sx-label + .sx-h2 { margin-top: 20px; }
.sx-lead { font-size: var(--c-lead); line-height: var(--c-lead-lh); color: var(--ink); max-width: 34rem; text-wrap: pretty; }
.sx-h2 + .sx-lead { margin-top: 24px; }
.sx-body { font-size: var(--c-body); line-height: var(--c-body-lh); color: var(--ink); max-width: 36rem; text-wrap: pretty; }
.sx-h3 { font-family: var(--font-text); font-weight: 600; font-size: var(--c-h3); line-height: var(--c-h3-lh); letter-spacing: -0.012em; text-wrap: balance; }
.sx--ink .sx-body, .sx--ink .sx-lead { color: var(--c-soft-ink); }
.sx--ink .sx-h2, .sx--ink .sx-h3 { color: var(--paper); }
@media (width < 600px) { .sx-label + .sx-h2 { margin-top: 14px; } .sx-h2 + .sx-lead { margin-top: 16px; } }
.hl {
  background: linear-gradient(to bottom, transparent 0 52%, var(--accent) 52% 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: 2px; margin-inline: -2px;
}
@media (forced-colors: active) { .hl { background: none; text-decoration: underline; } }
.ob {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: var(--c-lift-front);
  color: var(--ink);
  font-size: var(--c-ob); line-height: var(--c-ob-lh);
  font-variant-numeric: tabular-nums;
}
.ob .k { font-size: var(--c-ob-k); line-height: 18px; color: var(--grey); }
.ob .amt {
  font-family: var(--font-display); font-weight: 600; font-stretch: 88%;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink);
}
.ob .bar { display: block; height: 6px; background: var(--c-bar); }
.tag::before {
  content: attr(data-n);
  position: absolute; z-index: 3; left: -13px; top: -13px;
  display: grid; place-items: center; width: 28px; height: 28px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 600; font-stretch: 90%; font-size: 13px; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.sq { flex: none; display: inline-block; width: 10px; height: 10px; background: var(--ink); }
.sq--open { background: transparent; box-shadow: inset 0 0 0 var(--c-stroke) var(--ink); }
.sq--acc { background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, var(--accent)); }
.sq--half { background: linear-gradient(to right, var(--ink) 0 50%, transparent 50%); box-shadow: inset 0 0 0 var(--c-stroke) var(--ink); }
@supports (padding: max(0px)) {
  .wrap { width: calc(100% - max(var(--gutter), env(safe-area-inset-left)) - max(var(--gutter), env(safe-area-inset-right))); }
}
@media (width > 1920px) { .topbar .wrap { max-width: none; } }
@media (forced-colors: active) {
  .hero__mark svg .letters, .hero__mark svg .realO, .hero__mark svg .sym, .hero__mark svg .pt, .hero__mark svg .outer, .brand .mark__ink { fill: CanvasText; }
  .hero__mark svg .inner, .hero__mark svg .cutL, .hero__mark svg .cutR { fill: Canvas; }
  .btn, .home .hero__contact .link { border: 1px solid ButtonText; }
  .ob { border-color: CanvasText; }
}
.sx--ink :focus-visible, .sx--ink:focus-visible { outline-color: var(--accent); }
.stop::before { width: max(0.17em, 6px); height: max(0.17em, 6px); margin-right: calc(-1 * max(0.17em, 6px) - 0.03em); }   
@media (hover: hover) { .btn--ink:hover { background: var(--accent); color: var(--ink); } }                                  
.js .topbar--home.is-open .brand svg { opacity: 1; clip-path: inset(0 0 0 0); }                                                
.js .topbar--home.is-open .brand__name { translate: 0 0; }
@media (width < 600px) { .brand { white-space: normal; min-width: 0; } }                                                        
@media (orientation: landscape) and (max-height: 500px) and (width < 600px) { .js .topbar__links > a:not(.btn) { margin: 0; padding: 0; } }   
@media (forced-colors: active) { .mail { text-decoration-thickness: 1px; text-underline-offset: 0.2em; } }
.pb__grid, .first__grid, .own__grid, .close__grid, .idea__grid, .pv-grid, .nf-grid, .ft__main, .pv-head__in { grid-template-columns: minmax(0, 1fr); }
.idob__h, .stack__k, .ft__h, .nf-try, .paid { font-family: var(--font-display); font-stretch: 118%; letter-spacing: 0.1em; }
.glass-lt, .glass-ink { -webkit-backdrop-filter: var(--c-blur); backdrop-filter: var(--c-blur); }
.glass-lt { background: var(--c-glass-lt); border-color: rgb(10 12 17 / 0.09); box-shadow: var(--c-glass-lt-edge), var(--c-lift-front); }
.glass-ink { background: var(--c-glass-ink); border-color: transparent; box-shadow: var(--c-glass-ink-edge), 0 24px 48px -24px rgb(0 0 0 / 0.6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-lt { background: rgb(255 255 255 / 0.96); }
  .glass-ink { background: var(--c-ink-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-lt { background: rgb(255 255 255 / 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass-ink { background: var(--c-ink-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) { .glass-lt, .glass-ink { -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid CanvasText; } }
.motion main :where(.glass-lt, .glass-ink) { -webkit-backdrop-filter: none; backdrop-filter: none; }
@keyframes glass-on {
  from { -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%); }
  to { -webkit-backdrop-filter: var(--c-blur); backdrop-filter: var(--c-blur); }
}
.motion main .is-in :is(.glass-lt, .glass-ink), .motion main .is-in:is(.glass-lt, .glass-ink) {
  -webkit-backdrop-filter: var(--c-blur); backdrop-filter: var(--c-blur);
  animation: glass-on var(--t-base) var(--e-out) var(--t-slow) both;
}
@media (width < 600px) {
  .motion main .is-in :is(.glass-lt, .glass-ink), .motion main .is-in:is(.glass-lt, .glass-ink), main :is(.glass-lt, .glass-ink) {
    -webkit-backdrop-filter: none; backdrop-filter: none; animation: none;
  }
  main .glass-lt { background-color: var(--paper); }
}
@media (width < 1200px) {
  .motion main .is-in .pstep__ob :is(.glass-lt, .glass-ink), .motion main .pstep__ob .is-in:is(.glass-lt, .glass-ink), .pstep__ob :is(.glass-lt, .glass-ink) {
    -webkit-backdrop-filter: none; backdrop-filter: none; animation: none;
  }
}
.sx--ink, .ft, .not, .credit, .stack__own, .fx--in, .chip, .tag::before, .btn--ink, .topbar[data-tone="ink"], .sx-label--bare::before {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.sx-label--bare::before {
  display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1; font-stretch: 118%; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.sx-label--bare > span { display: none; }
.close .sx-label--bare::before { color: var(--paper); }
.sx-label--bare + .sx-h2 { margin-top: 24px; }
.idob__h, .not__h, .rel__h, .run__title, .does__foot, .pb__key, .own__end-line, .stack__t { text-wrap: balance; }
.own__end-k, .ft__legal p, .nf-try, .sx-lead, .sx-body, .pstep__p, .rel__note, .rel__rules, .run__note, .idob__p, .notice__row .body { text-wrap: pretty; }
@media (width > 1920px) { .sx > .wrap, .ft > .wrap { max-width: none; } }
.btn { transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), translate var(--t-fast) var(--e-out); }
.btn:active { translate: 0 1px; }
.tlink::after { transition: translate var(--t-fast) var(--e-out); }
.topbar__links > a:not(.btn), .mail { transition: color var(--t-fast) var(--e-out), text-decoration-thickness var(--t-fast) var(--e-out); }
@media (prefers-reduced-motion: reduce) { .btn:active { translate: none; } }
.ap-draw { --s: 560px; --ap-fill: var(--c-ink-2); position: absolute; display: block; width: var(--s); height: var(--s); pointer-events: none;
  --w: calc(var(--s) * 130 / 686); --h: calc(var(--s) * 287 / 686); --t: calc(var(--s) * 112 / 686); --b: calc(var(--s) * 175 / 686); }
@supports (width: round(1.5px, 1px)) {
  .ap-draw { --w: round(calc(var(--s) * 130 / 686), 1px); --h: round(calc(var(--s) * 287 / 686), 1px); --t: round(calc(var(--s) * 112 / 686), 1px); --b: round(calc(var(--s) * 175 / 686), 1px); }
}
.ap-draw::before, .ap-draw::after { content: ""; position: absolute; left: 0; right: 0; height: var(--h); background: var(--ap-fill); }
.ap__big::before {
  background:
    linear-gradient(var(--ap-edge), var(--ap-edge)) left 0 top 0 / 100% 1px no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) left 0 bottom 0 / 100% 1px no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) left 0 top 0 / 1px 100% no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) right 0 top 0 / 1px 100% no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) left var(--w) top calc(var(--t) - 1px) / calc(100% - 2 * var(--w)) 1px no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) left calc(var(--w) - 1px) top var(--t) / 1px 100% no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) right calc(var(--w) - 1px) top var(--t) / 1px 100% no-repeat,
    var(--ap-fill);
}
.ap__big::after {
  background:
    linear-gradient(var(--ap-edge), var(--ap-edge)) left 0 top 0 / 100% 1px no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) left 0 bottom 0 / 100% 1px no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) left 0 top 0 / 1px 100% no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) right 0 top 0 / 1px 100% no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) left var(--w) top var(--b) / calc(100% - 2 * var(--w)) 1px no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) left calc(var(--w) - 1px) top 0 / 1px var(--b) no-repeat,
    linear-gradient(var(--ap-edge), var(--ap-edge)) right calc(var(--w) - 1px) top 0 / 1px var(--b) no-repeat,
    var(--ap-fill);
}
.ap-draw::before { top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--w)) 100%, calc(100% - var(--w)) var(--t), var(--w) var(--t), var(--w) 100%, 0 100%); }
.ap-draw::after { bottom: 0; clip-path: polygon(0 0, var(--w) 0, var(--w) var(--b), calc(100% - var(--w)) var(--b), calc(100% - var(--w)) 0, 100% 0, 100% 100%, 0 100%); }
.inv { display: grid; }
.inv__head { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 24px 24px 0; }
.inv__head .inv__logo { margin-top: 2px; }
.inv__logo { width: 24px; height: 24px; background: var(--ink); }
.inv__ref { display: grid; align-content: center; min-width: 0; }
.inv__id { font-size: 22px; line-height: 28px; }
.ob .inv__due { font-size: 13px; line-height: 18px; color: var(--grey); white-space: nowrap; }
.inv__rules { display: grid; margin: 12px 24px 0; }
.inv__rules > i { display: block; height: 28px; border-bottom: 1px solid var(--hairline); }
.inv__total { display: grid; justify-items: end; margin: 24px 24px 0; padding: 12px 0 24px; border-top: 2px solid var(--ink); }
.inv__total .k { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.inv__total .amt { font-size: 64px; line-height: 64px; letter-spacing: -0.024em; }
.inv__wait { display: none; }
:root {
  --rise-s: 12px;   
  --rise: 16px;     
  --rise-l: 24px;   
  --g-blur-pane: 28px; --g-blur-card: 24px; --g-blur-bar: 20px; --g-blur-slot: 12px; --g-sat: 160%;
  --g-frost-pane: rgb(255 255 255 / 0.58); --g-frost-card: rgb(255 255 255 / 0.64); --g-frost-bar: rgb(255 255 255 / 0.70);
  --g-ink-pane: rgb(14 17 24 / 0.50); --g-ink-card: rgb(14 17 24 / 0.56); --g-ink-bar: rgb(14 17 24 / 0.60);
  --g-clear: rgb(255 255 255 / 0.08); --g-slot: rgb(255 255 255 / 0.30);
  --g-apricot-bar: rgb(255 191 126 / 0.84); --g-sat-apricot: 100%;   
  --g-opal: rgb(255 255 255 / 0.90);        
  --g-smoked-glass: rgb(14 17 24 / 0.86);   
  --g-milk: #FFFFFF; --g-smoked: #0E1118;   
  --g-solid-frost: rgb(255 255 255 / 0.94); --g-solid-ink: #151922;
  --edge: 1px;
  --g-rim-frost: linear-gradient(135deg, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.60) 22%, rgb(255 255 255 / 0.16) 55%, rgb(10 12 17 / 0.10) 100%);
  --g-rim-ink: linear-gradient(135deg, rgb(255 255 255 / 0.26) 0%, rgb(255 255 255 / 0.12) 30%, rgb(255 255 255 / 0.05) 65%, rgb(255 255 255 / 0.02) 100%);
  --g-rim-clear: linear-gradient(135deg, rgb(255 255 255 / 0.85) 0%, rgb(255 255 255 / 0.35) 35%, rgb(255 255 255 / 0.10) 70%, rgb(10 12 17 / 0.14) 100%);
  --g-rim-milk: linear-gradient(135deg, rgb(255 255 255 / 1) 0%, rgb(228 231 236 / 1) 60%, rgb(10 12 17 / 0.12) 100%);
  --g-slot-line: rgb(10 12 17 / 0.34);
  --g-bevel-lt: inset 0 1px 0 rgb(255 255 255 / 0.5);
  --g-bevel-dk: inset 0 1px 0 rgb(255 255 255 / 0.12);
  --g-bevel-milk: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgb(10 12 17 / 0.05);
  --g-ring: 0 0 0 var(--edge) rgb(10 12 17 / 0.08);
  --g-none: 0 0 #0000;
  --d-card: 0 1px 2px rgb(10 12 17 / 0.06), 0 20px 40px -18px rgb(10 12 17 / 0.22);          
  --d-card-front: 0 2px 4px rgb(10 12 17 / 0.08), 0 24px 48px -20px rgb(10 12 17 / 0.28);    
  --d-pane: 0 1px 3px rgb(10 12 17 / 0.06), 0 36px 72px -32px rgb(10 12 17 / 0.28);          
  --d-ink-card: 0 1px 2px rgb(3 4 7 / 0.50), 0 24px 48px -20px rgb(3 4 7 / 0.65);            
  --d-ink-pane: 0 2px 4px rgb(3 4 7 / 0.45), 0 40px 80px -32px rgb(3 4 7 / 0.75);            
  --d-smoked: 0 1px 2px rgb(10 12 17 / 0.25), 0 24px 48px -20px rgb(10 12 17 / 0.45);        
  --d-apricot: 0 1px 2px rgb(10 12 17 / 0.10), 0 28px 56px -24px rgb(10 12 17 / 0.28);       
  --grain-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .05 0 0 0 0 .07 1.6 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)' opacity='.045'/%3E%3C/svg%3E");
  --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)' opacity='.035'/%3E%3C/svg%3E");
  --ty-h2: 48px; --ty-h2-lh: 52px; --ty-h2-ls: -0.022em;
  --ty-close: 56px; --ty-close-lh: 60px; --ty-close-ls: -0.024em;
  --ty-key: 24px; --ty-key-lh: 32px; --ty-key-ls: -0.016em;
  --ty-inv: 32px; --ty-inv-lh: 38px; --ty-inv-ls: -0.018em;
  --ty-promise: 48px; --ty-promise-lh: 52px; --ty-promise-ls: -0.024em;
  --ty-h1: 56px; --ty-h1-lh: 60px; --ty-h1-ls: -0.026em;
  --ty-lead: 20px; --ty-lead-lh: 31px;
  --ty-body: 17px; --ty-body-lh: 28px;
  --ty-h3: 20px; --ty-h3-lh: 28px;
  --ty-h3-pin: 28px; --ty-h3-pin-lh: 34px;
  --ty-label: 12px; --ty-label-lh: 16px;
  --ty-head: 13px; --ty-head-lh: 18px;
  --ty-stamp: 13px; --ty-stamp-lh: 18px;
  --ty-ob: 14px; --ty-ob-lh: 20px;
  --ty-ob-lg: 15px; --ty-ob-lg-lh: 22px;
  --ty-ob-k: 13px; --ty-ob-k-lh: 18px;
  --ty-total: 60px; --ty-total-lh: 60px;
  --ty-fig: 22px; --ty-fig-lh: 28px;
  --ty-fig-xl: 52px; --ty-fig-xl-lh: 52px;
  --ty-record: 14px; --ty-record-lh: 21px;
}
@media (min-resolution: 2dppx) { :root { --edge: 0.5px; } }
@media (min-resolution: 3dppx) { :root { --edge: 0.334px; --c-hair2: 0.334px; } }   
@media (1200px <= width < 1440px) { :root { --ty-total: 48px; --ty-total-lh: 52px; } }
@media (900px <= width < 1200px) {
  :root {
    --ty-h2: 40px; --ty-h2-lh: 44px; --ty-close: 46px; --ty-close-lh: 50px; --ty-inv: 30px; --ty-inv-lh: 36px;
    --ty-promise: 40px; --ty-promise-lh: 44px; --ty-h1: 46px; --ty-h1-lh: 50px; --ty-h3-pin: 26px; --ty-h3-pin-lh: 32px;
    --ty-total: 44px; --ty-total-lh: 48px; --ty-fig: 20px; --ty-fig-lh: 26px; --ty-fig-xl: 46px; --ty-fig-xl-lh: 46px;
    --ty-ob-lg: 14px; --ty-ob-lg-lh: 20px;
  }
}
@media (600px <= width < 900px) {
  :root {
    --g-blur-pane: 24px; --g-blur-card: 20px; --g-blur-slot: 10px;
    --ty-h2: 34px; --ty-h2-lh: 38px; --ty-close: 40px; --ty-close-lh: 44px; --ty-key: 22px; --ty-key-lh: 30px;
    --ty-inv: 28px; --ty-inv-lh: 34px; --ty-promise: 36px; --ty-promise-lh: 40px; --ty-h1: 46px; --ty-h1-lh: 50px;
    --ty-lead: 19px; --ty-lead-lh: 30px; --ty-total: 40px; --ty-total-lh: 44px; --ty-fig: 20px; --ty-fig-lh: 26px;
    --ty-fig-xl: 40px; --ty-fig-xl-lh: 40px; --ty-ob-lg: 14px; --ty-ob-lg-lh: 20px;
  }
}
@media (width < 600px) {
  :root {
    --g-blur-pane: 16px; --g-blur-card: 14px; --g-blur-bar: 14px; --g-blur-slot: 0px; --g-sat: 150%;
    --ty-h2: 28px; --ty-h2-lh: 32px; --ty-h2-ls: -0.018em; --ty-close: 32px; --ty-close-lh: 36px;
    --ty-key: 22px; --ty-key-lh: 30px; --ty-inv: 24px; --ty-inv-lh: 30px; --ty-promise: 30px; --ty-promise-lh: 34px;
    --ty-h1: 34px; --ty-h1-lh: 38px; --ty-lead: 18px; --ty-lead-lh: 28px; --ty-body: 16px; --ty-body-lh: 26px;
    --ty-h3: 18px; --ty-h3-lh: 25px; --ty-total: 32px; --ty-total-lh: 36px; --ty-fig: 18px; --ty-fig-lh: 22px;
    --ty-fig-xl: 38px; --ty-fig-xl-lh: 38px; --ty-ob-lg: 14px; --ty-ob-lg-lh: 20px;
  }
}
@media (width < 360px) {
  :root {
    --ty-h2: 26px; --ty-h2-lh: 30px; --ty-close: 28px; --ty-close-lh: 32px; --ty-inv: 22px; --ty-inv-lh: 28px;
    --ty-promise: 26px; --ty-promise-lh: 30px; --ty-h1: 30px; --ty-h1-lh: 34px; --ty-total: 28px; --ty-total-lh: 32px;
    --ty-fig-xl: 34px; --ty-fig-xl-lh: 34px;
  }
}
.gl {
  --gl-tint: var(--g-frost-card); --gl-blur: var(--g-blur-card); --gl-sat: var(--g-sat);
  --gl-rim: var(--g-rim-frost); --gl-bevel: var(--g-bevel-lt); --gl-ring: var(--g-ring); --gl-depth: var(--d-card);
  --gl-grain: var(--grain-ink); --gl-solid: var(--g-solid-frost); --gl-opaque: var(--g-milk);
  background-color: var(--gl-tint);
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
  backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
  border: 0;
  box-shadow: var(--gl-bevel), var(--gl-ring), var(--gl-depth);
  contain: paint;
  isolation: isolate;
}
:where(.gl) { position: relative; }
:where(.gl) { transform: translate(var(--gl-sx, 0px), var(--gl-sy, 0px)); }
.gl::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: var(--edge); background: var(--gl-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.gl--pane { --gl-blur: var(--g-blur-pane); --gl-tint: var(--g-frost-pane); --gl-depth: var(--d-pane); }
.gl--pane, .gl--grain { background-image: var(--gl-grain); background-size: 128px 128px; }
.gl--bar { --gl-blur: var(--g-blur-bar); --gl-tint: var(--g-frost-bar); --gl-depth: var(--g-none); --gl-solid: rgb(255 255 255 / 0.96); }
.gl--front { --gl-depth: var(--d-card-front); }
.gl--ink {
  --gl-tint: var(--g-ink-card); --gl-rim: var(--g-rim-ink); --gl-bevel: var(--g-bevel-dk); --gl-ring: var(--g-none);
  --gl-depth: var(--d-ink-card); --gl-grain: var(--grain-paper); --gl-solid: var(--g-solid-ink); --gl-opaque: var(--g-solid-ink);
  color: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.gl--ink.gl--pane { --gl-tint: var(--g-ink-pane); --gl-depth: var(--d-ink-pane); }
.gl--ink.gl--bar { --gl-tint: var(--g-ink-bar); --gl-solid: var(--ink); }
.gl--clear { --gl-tint: var(--g-clear); --gl-rim: var(--g-rim-clear); --gl-sat: 100%; --gl-depth: var(--d-apricot); --gl-solid: var(--g-clear); }
.gl--slot { --gl-tint: var(--g-slot); --gl-blur: var(--g-blur-slot); --gl-depth: var(--g-none); --gl-solid: var(--g-slot); }
.gl--slot::before {
  padding: 0; -webkit-mask: none; mask: none;
  background:
    repeating-linear-gradient(90deg, var(--g-slot-line) 0 6px, transparent 6px 10px) left top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--g-slot-line) 0 6px, transparent 6px 10px) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--g-slot-line) 0 6px, transparent 6px 10px) left top / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--g-slot-line) 0 6px, transparent 6px 10px) right top / 1px 100% no-repeat;
}
.gl--milk, .gl--opal {
  --gl-tint: var(--g-opal); --gl-sat: 100%; --gl-rim: var(--g-rim-milk); --gl-bevel: var(--g-bevel-milk);
  --gl-depth: var(--d-ink-card); --gl-solid: var(--g-milk); --gl-opaque: var(--g-milk); color: var(--ink);
}
.gl--smoked {
  --gl-tint: var(--g-smoked-glass); --gl-rim: var(--g-rim-ink); --gl-bevel: var(--g-bevel-dk); --gl-ring: var(--g-none);
  --gl-depth: var(--d-smoked); --gl-grain: var(--grain-paper); --gl-solid: var(--g-smoked); --gl-opaque: var(--g-smoked);
  color: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.gl--solid { background-color: var(--gl-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gl--spill { contain: none; }
@media (width < 600px) {
  .gl--tall { --gl-blur: 12px; --gl-tint: rgb(255 255 255 / 0.66); }
  .gl--ink.gl--tall { --gl-tint: rgb(14 17 24 / 0.58); }
  .gl--bar { background-image: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gl { background-color: var(--gl-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .gl { background-color: var(--gl-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .gl { background: Canvas; border: 1px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .gl::before { display: none; }
}
:where(:has(> .bd)) { position: relative; isolation: isolate; }
.bd { position: absolute; inset: 0; z-index: -1; display: block; pointer-events: none; overflow: clip; contain: layout paint; }
.bd-grid {
  --bd-step: 24px; --bd-major: 96px; --bd-c: rgb(10 12 17 / 0.045); --bd-c2: rgb(10 12 17 / 0.08);
  background:
    linear-gradient(to right, var(--bd-c2) 1px, transparent 1px) var(--bd-x, 0) var(--bd-y, 0) / var(--bd-major) var(--bd-major),
    linear-gradient(to bottom, var(--bd-c2) 1px, transparent 1px) var(--bd-x, 0) var(--bd-y, 0) / var(--bd-major) var(--bd-major),
    linear-gradient(to right, var(--bd-c) 1px, transparent 1px) var(--bd-x, 0) var(--bd-y, 0) / var(--bd-step) var(--bd-step),
    linear-gradient(to bottom, var(--bd-c) 1px, transparent 1px) var(--bd-x, 0) var(--bd-y, 0) / var(--bd-step) var(--bd-step);
}
.bd-rules {
  --bd-step: 56px; --bd-c: rgb(10 12 17 / 0.06);
  background: linear-gradient(to bottom, var(--bd-c) 1px, transparent 1px) var(--bd-x, 0) var(--bd-y, 0) / 100% var(--bd-step);
}
.bd-hatch {
  --bd-step: 8px; --bd-c: rgb(10 12 17 / 0.045);
  background: repeating-linear-gradient(45deg, var(--bd-c) 0 1px, transparent 1px var(--bd-step));
}
@media (forced-colors: active) { .bd { display: none; } }
.tab {
  --tab-bg: var(--paper); --tab-fg: var(--ink); --tab-edge: var(--hairline);
  position: absolute; z-index: 2; top: -32px; left: max(var(--gutter), env(safe-area-inset-left));
  height: 32px; margin: 0;
}
.sx--mist > .tab { --tab-bg: var(--mist); }
.sx--ink > .tab { --tab-bg: var(--ink); --tab-fg: var(--paper); --tab-edge: transparent; }
.sx--accent > .tab { --tab-bg: var(--accent); --tab-edge: transparent; }
.tab > span {
  display: flex; align-items: center; height: 32px; padding: 0 12px;
  background: var(--tab-bg); color: var(--tab-fg);
  box-shadow: inset 1px 0 0 var(--tab-edge), inset -1px 0 0 var(--tab-edge), inset 0 1px 0 var(--tab-edge);
  font-family: var(--font-text); font-weight: 600; font-stretch: 100%; font-size: 12px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.sx--ink > .tab > span { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(:has(> .tab)) { scroll-margin-top: 16px; }
@media (forced-colors: active) { .tab > span { border: 1px solid CanvasText; border-bottom: 0; } }
.motion :where([data-reveal]) { opacity: 0; translate: 0 var(--rise); }
.motion :where([data-reveal="rise-s"]) { translate: 0 var(--rise-s); }
.motion :where([data-reveal="rise-l"]) { translate: 0 var(--rise-l); }
.motion :where([data-reveal="fade"]) { translate: none; }
.motion :where([data-reveal="left"]) { translate: calc(-1 * var(--rise-l)) 0; }
.motion :where([data-reveal="right"]) { translate: var(--rise-l) 0; }
.motion :where([data-reveal="hold"]) { opacity: 1; translate: none; }
.motion [data-reveal].is-in {
  opacity: 1; translate: none;
  transition: opacity var(--t-base) var(--e-out), translate var(--t-slow) var(--e-out);
  transition-delay: calc(var(--step, 0) * var(--t-stagger) + var(--mo-delay, 0ms));
}
.motion :where([data-stagger] > *) { opacity: 0; translate: 0 var(--rise-s); }
.motion .is-in[data-stagger] > * {
  opacity: 1; translate: none;
  transition: opacity var(--t-base) var(--e-out), translate var(--t-slow) var(--e-out);
  transition-delay: calc(var(--mo-delay, 0ms) + var(--j, 0) * var(--t-stagger));
}
.is-moving, .is-moving [data-move] { will-change: translate; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
.topbar {
  --bar-tint: var(--g-frost-bar); --bar-sat: 0%; --bar-grain: var(--grain-ink); --bar-solid: rgb(255 255 255 / 0.96);
  --bar-fg: var(--ink); --bar-hover: var(--grey); --bar-ring: var(--ink);
  --bar-line: rgb(10 12 17 / 0.08); --bar-lift: 0 8px 24px -16px rgb(10 12 17 / 0.18);
  --bar-cur: var(--accent);
  --bar-btn: var(--ink); --bar-btn-fg: var(--paper); --bar-btn-hover: var(--accent); --bar-btn-hover-fg: var(--ink);
  --bar-mark: var(--ink); --bar-stop: var(--accent);
  background: transparent; box-shadow: none; color: var(--bar-fg);
  transition: color var(--t-base) var(--e-move);
}
.topbar[data-tone="ink"] {
  --bar-tint: var(--g-ink-bar); --bar-grain: var(--grain-paper); --bar-solid: var(--ink);
  --bar-fg: var(--paper); --bar-hover: var(--c-soft-ink); --bar-ring: var(--accent);
  --bar-line: rgb(255 255 255 / 0.10); --bar-lift: 0 0 #0000;
  --bar-btn: var(--paper); --bar-btn-fg: var(--ink); --bar-mark: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.topbar[data-tone="accent"] {
  --bar-tint: var(--g-apricot-bar); --bar-sat: var(--g-sat-apricot); --bar-solid: var(--accent);
  --bar-hover: var(--c-ink-3); --bar-line: rgb(10 12 17 / 0.10); --bar-cur: var(--ink);
  --bar-btn-hover: var(--paper); --bar-stop: var(--ink);   
}
.topbar.is-scrolled, .topbar.is-open { box-shadow: none; }
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bar-tint);
  -webkit-backdrop-filter: blur(var(--g-blur-bar)) saturate(var(--bar-sat));
  backdrop-filter: blur(var(--g-blur-bar)) saturate(var(--bar-sat));
  box-shadow: inset 0 calc(-1 * var(--edge)) 0 transparent, 0 0 #0000;
  transition: background-color var(--t-base) var(--e-move), box-shadow var(--t-fast) var(--e-out);
}
@media (width >= 600px) { .topbar::before { background-image: var(--bar-grain); background-size: 128px 128px; } }
.topbar.is-scrolled::before, .topbar.is-open::before { box-shadow: inset 0 calc(-1 * var(--edge)) 0 var(--bar-line), var(--bar-lift); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar::before { background-color: var(--bar-solid); } }
@media (prefers-reduced-transparency: reduce) {
  .topbar::before { background-color: var(--bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) { .topbar::before { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid CanvasText; } }
.topbar .brand .mark__ink { fill: var(--bar-mark); transition: fill var(--t-base) var(--e-move); }
.topbar .brand .mark__stop { fill: var(--bar-stop); transition: fill var(--t-base) var(--e-move); }
.brand { align-self: center; height: 44px; }
.topbar__links > a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--bar-fg); text-decoration: none;
  transition: color var(--t-fast) var(--e-out);
}
@media (hover: hover) { .topbar__links > a:not(.btn):hover { color: var(--bar-hover); } }
.topbar :focus-visible { outline: 2px solid var(--bar-ring); outline-offset: 2px; }
.topbar__links > a:not(.btn) > span { position: relative; z-index: 0; display: inline-block; }
.topbar__links > a:not(.btn) > span::after {
  content: ""; position: absolute; z-index: -1; left: -3px; right: -3px; bottom: 2px; height: 9px;
  background: var(--bar-cur); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-base) var(--e-out);
}
.topbar__links > a.is-here > span::after { transform: none; }
.topbar:is([data-tone="ink"], [data-tone="accent"]) .topbar__links > a:not(.btn) > span::after { left: 0; right: 0; bottom: -5px; height: 2px; }
.topbar .topbar__btn { height: 44px; padding: 0 18px; background: var(--bar-btn); color: var(--bar-btn-fg); }
@media (hover: hover) { .topbar .topbar__btn:hover { background: var(--bar-btn-hover); color: var(--bar-btn-hover-fg); } }
.topbar .topbar__btn:focus-visible { outline-color: var(--bar-ring); outline-offset: 2px; }
.menu-btn { color: var(--bar-fg); transition: color var(--t-base) var(--e-move); }
@media (width < 600px) {
  .topbar__in { gap: 16px; }
  .topbar .topbar__btn { padding: 0 12px; }
  .js .menu-btn { gap: 6px; padding: 0 6px; margin-right: -6px; font-size: 15px; font-weight: 500; }
  .js .menu-btn::after {
    content: ""; width: 7px; height: 7px; margin-top: -4px; flex: none;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg;
    transition: rotate var(--t-base) var(--e-move), margin var(--t-base) var(--e-move);
  }
  .js .topbar.is-open .menu-btn::after { rotate: 225deg; margin-top: 4px; }
  .js .topbar { --menu-h: 196px; }
  .js .topbar__links {
    top: 100%; padding: 4px var(--gutter) 24px; gap: 0;
    background-color: var(--bar-tint);
    -webkit-backdrop-filter: blur(16px) saturate(var(--bar-sat)); backdrop-filter: blur(16px) saturate(var(--bar-sat));
    box-shadow: inset 0 calc(-1 * var(--edge)) 0 var(--bar-line), 0 24px 48px -24px rgb(10 12 17 / 0.35);
    opacity: 0; translate: 0 -8px;
    transition: opacity var(--t-fast) var(--e-out), translate var(--t-fast) var(--e-out), display var(--t-fast) allow-discrete,
                background-color var(--t-base) var(--e-move);
  }
  .js .topbar.is-open .topbar__links {
    opacity: 1; translate: none;
    transition: opacity var(--t-base) var(--e-out), translate var(--t-base) var(--e-out), display var(--t-base) allow-discrete,
                background-color var(--t-base) var(--e-move);
  }
  @starting-style { .js .topbar.is-open .topbar__links { opacity: 0; translate: 0 -8px; } }
  .js .topbar::after {
    content: ""; position: fixed; inset: calc(var(--topbar-h) + var(--menu-h)) 0 0 0; z-index: -1;
    background: rgb(10 12 17 / 0.28); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t-fast) var(--e-out), visibility 0s linear var(--t-fast);
  }
  .js .topbar.is-open::after {
    inset: calc(var(--topbar-h) + var(--menu-h)) 0 0 0; background: rgb(10 12 17 / 0.28);
    opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--t-base) var(--e-out), visibility 0s;
  }
  .js .topbar__links > a:not(.btn) {
    display: flex; align-items: center; height: 56px; margin: 0; padding: 0;
    font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 20px; line-height: 24px; letter-spacing: -0.01em;
    color: var(--bar-fg); border-bottom: 1px solid var(--bar-line);
  }
  .js .topbar__links > a:not(.btn):last-child { border-bottom: 0; }
  .js .topbar__links > a:not(.btn) > span::after { left: -3px; right: -3px; bottom: 3px; height: 10px; }
  .js .topbar:is([data-tone="ink"], [data-tone="accent"]) .topbar__links > a:not(.btn) > span::after { left: 0; right: 0; bottom: -6px; height: 2px; }
  .js .topbar__links > a:not(.btn):focus-visible { outline-offset: -2px; }
  .js .topbar__links > a:not(.btn):active { background: rgb(10 12 17 / 0.04); }
  .js .topbar[data-tone="ink"] .topbar__links > a:not(.btn):active { background: rgb(255 255 255 / 0.06); }
}
@media (width < 360px) { .topbar__in { gap: 12px; } .topbar .topbar__btn { padding: 0 9px; } .js .menu-btn { padding-left: 4px; } }
@media (width < 600px) and (prefers-reduced-motion: reduce) {
  .js .topbar__links, .js .topbar.is-open .topbar__links { translate: none; transition: none; }
  .js .topbar::after, .js .topbar.is-open::after, .js .menu-btn::after { transition: none; }
}
@media (width < 600px) and (prefers-reduced-transparency: reduce) {
  .js .topbar__links { background-color: var(--bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (width < 600px) { .js .topbar__links { background-color: var(--bar-solid); } }
}
.pv-h1, .nf-h1 { max-width: 12em; }
.kicker + :is(.pv-h1, .nf-h1) { margin-top: 16px; }
.pv-head { padding-block: 96px 176px; }
.pv-head__in { display: grid; row-gap: 24px; }
@media (width >= 900px) {
  .pv-head__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); align-items: end; }
  .pv-head__main { grid-column: 1 / span 6; }
  .pv-head__lead { grid-column: 8 / -1; }
}
.pv-head__lead { color: var(--ink); }
.pv-body { padding-top: 0; }
@media (width >= 900px) { .pv-body { padding-bottom: 96px; } }
.bd--envelope { --pv-flap: 400px; }
.pv-bd__weave {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgb(10 12 17 / 0.18) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgb(10 12 17 / 0.18) 0 1px, transparent 1px 6px);
  -webkit-mask: linear-gradient(to bottom, #000 80%, transparent); mask: linear-gradient(to bottom, #000 80%, transparent);
}
.pv-bd__flap {
  position: absolute; left: 0; right: 0; top: 0; height: var(--pv-flap);
  background: rgb(93 100 112 / 0.22); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.pv-grid { display: grid; }
.pv-doc { position: relative; margin-top: -112px; }
.pv-sheet { padding: 0 48px 24px; }
.pv-sheet__top { display: flex; align-items: center; padding-block: 28px 24px; border-bottom: 2px solid var(--ink); }
.pv-sheet__mark { display: inline-flex; }
.pv-sheet__mark svg { width: 34px; height: 24px; }
.notice__row { display: grid; grid-template-columns: 48px minmax(0, 1fr); row-gap: 8px; padding-block: 32px; scroll-margin-top: 8px; }
.notice__row:focus { outline: none; }
.notice__row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.notice__row + .notice__row { border-top: var(--c-hair2) solid rgb(10 12 17 / 0.12); }
.notice__row .num {
  grid-row: 1; font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 12px; line-height: 28px;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums lining-nums;
  color: color-mix(in srgb, var(--grey) 82%, var(--ink));   
}
.notice__h { grid-column: 2; font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; text-wrap: balance; }
.notice__b { grid-column: 2; font-size: var(--ty-body); line-height: var(--ty-body-lh); max-width: 38rem; color: var(--ink); text-wrap: pretty; }
.notice__b a:not(.mail) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.notice__row:last-child .notice__b::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; background: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, var(--accent));
}
@media (width >= 1200px) {
  .notice__row { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr); column-gap: 24px; }
  .notice__h, .notice__b { grid-column: auto; grid-row: 1; }
}
.pv-flag {
  position: absolute; z-index: 1; left: -12px; top: 0; width: 12px; height: 36px; background: var(--accent);
  translate: 0 var(--flag-y, 108px); transition: translate var(--t-slow) var(--e-move);
}
.pv-flag.is-riding, .motion .pv-sheet.is-in + .pv-flag.is-riding { transition-property: opacity; }
.pv-toc { display: none; }
@media (width >= 900px) {
  .pv-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); align-items: start; }
  .pv-toc {
    --gl-tint: var(--g-frost-bar); --gl-blur: var(--g-blur-bar); --gl-depth: var(--d-card);
    display: block; grid-column: 1 / span 3; grid-row: 1; position: sticky; top: calc(var(--topbar-h) + 40px);
    margin-top: 40px; padding: 8px 16px;
  }
  .pv-doc { grid-column: 4 / -1; grid-row: 1; }
  .pv-toc ol { counter-reset: toc; }
  .pv-toc li { counter-increment: toc; }
  .pv-toc li + li { border-top: 1px solid rgb(10 12 17 / 0.08); }
  .pv-toc a {
    position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; min-height: 44px;
    padding: 11px 0 11px 12px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--grey); text-decoration: none;
    transition: color var(--t-fast) var(--e-out);
  }
  .pv-toc a::before {
    content: counter(toc, decimal-leading-zero); font-family: var(--font-text); font-stretch: 100%; font-weight: 600;
    font-size: 12px; letter-spacing: 0.04em; color: inherit; font-variant-numeric: tabular-nums lining-nums;
  }
  .pv-toc a::after {
    content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; background: var(--ink);
    transform: scaleY(0); transition: transform var(--t-base) var(--e-out);
  }
  .pv-toc a[aria-current="true"] { color: var(--ink); }
  .pv-toc a[aria-current="true"]::after { transform: none; }
  .pv-toc a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  @media (hover: hover) { .pv-toc a:hover { color: var(--ink); } }
}
@media (900px <= width < 1200px) {
  .bd--envelope { --pv-flap: 360px; }
  .pv-sheet { padding: 0 40px 24px; }
  .pv-toc { padding: 8px 10px; }
  .pv-toc a { grid-template-columns: 26px minmax(0, 1fr); padding-left: 10px; font-size: 14px; line-height: 20px; text-wrap: balance; }
}
@media (width < 900px) {
  .pv-head { padding-block: 72px 152px; }
  .bd--envelope { --pv-flap: 320px; }
  .pv-sheet { padding: 0 32px 16px; }
}
@media (width < 600px) {
  .pv-head { padding-block: 48px 120px; }
  .bd--envelope { --pv-flap: 220px; }
  .pv-doc { margin-top: -80px; }
  .pv-sheet { padding: 0 20px 8px; }
  .pv-sheet__top { padding-block: 20px 16px; }
  .notice__row { grid-template-columns: 34px minmax(0, 1fr); padding-block: 24px; }
  .notice__h { font-size: 19px; line-height: 25px; }
  .pv-flag { left: -8px; width: 8px; }
}
@media (width <= 430px) {
  .notice__row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .notice__row .num { line-height: 16px; }
  .notice__h, .notice__b { grid-column: 1; }
}
@media (forced-colors: active) { .pv-flag { background: Highlight; } }
main.nf { flex: 1 0 auto; display: flex; flex-direction: column; }
.nf-fold {
  flex: 1 0 auto; display: grid; align-content: center; min-height: calc(100svh - var(--topbar-h));
  padding-block: 72px; overflow: clip;
}
.nf-grid { display: grid; row-gap: 56px; }
.nf__action { margin-top: 36px; }
.nf-grid__main { position: relative; z-index: 1; }
.nf-grid__links { position: relative; display: grid; justify-items: start; }
.nf-map {
  --map-x: 176px; --map-y: 112px; --map-crease: 208px;
  position: absolute; z-index: 0; left: var(--map-x); top: var(--map-y); width: 1200px; height: 1200px;
  background: rgb(93 100 112 / 0.20); pointer-events: none;
}
.nf-map__fold {
  position: absolute; top: 0; bottom: 0; left: var(--map-crease); width: 1px;
  background: rgb(10 12 17 / 0.16); box-shadow: 1px 0 0 rgb(255 255 255 / 0.45);
}
.nf-map::after { content: ""; position: absolute; inset: 0 0 0 calc(var(--map-crease) + 2px); background: rgb(93 100 112 / 0.05); }
.nf-slip { position: relative; z-index: 1; width: min(100%, 480px); padding: 0 24px 16px; }
.nf-slip__top { display: flex; align-items: center; padding-block: 24px 20px; border-bottom: 2px solid var(--ink); }
.nf-slip__top svg { width: 34px; height: 24px; }
.nf-try {
  margin-top: 20px; font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 12px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey);
}
.nf-cards { display: grid; margin-top: 8px; }
.nf-cards > li + li { border-top: 1px solid rgb(10 12 17 / 0.10); }
.nf-card.tlink {
  display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; min-height: 64px;
  margin: 0 -12px; padding: 0 12px;
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 17px; line-height: 24px; letter-spacing: 0;
  color: var(--ink); text-decoration: none;
  transition: background-color var(--t-fast) var(--e-out);
}
.nf-card.tlink > span { text-decoration: none; }
.nf-card.tlink::after {
  content: ""; justify-self: end; width: 8px; height: 8px; margin-right: 4px;
  border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); rotate: 45deg;
  transition: translate var(--t-fast) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .nf-card.tlink:hover { background: rgb(10 12 17 / 0.04); color: var(--ink); }
  .nf-card.tlink:hover::after { translate: 2px 0; }
}
.nf-card.tlink:active { background: rgb(10 12 17 / 0.06); }
.nf-card.tlink:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (width >= 900px) {
  .nf-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); align-items: end; }
  .nf-grid__main { grid-column: 1 / span 6; }
  .nf-grid__links { grid-column: 7 / -1; }
}
@media (width >= 1200px) { .nf-grid__links { grid-column: 8 / -1; } }
@media (900px <= width < 1200px) { .nf-map { --map-x: 152px; --map-y: 104px; --map-crease: 192px; } }
@media (width < 900px) {
  .nf-fold { padding-block: 88px 120px; }
  .nf-map { --map-x: 168px; --map-y: 104px; --map-crease: 200px; }
}
@media (width < 600px) {
  .nf-fold { padding-block: 56px 48px; }
  .nf-grid { row-gap: 44px; }
  .nf-slip { padding: 0 16px 8px; }
  .nf-slip__top { padding-block: 20px 16px; }
  .nf-map { --map-x: 136px; --map-y: 96px; --map-crease: 160px; }
}
@media (width < 360px) { .nf-map { --map-x: 112px; --map-crease: 136px; } }
@media (prefers-reduced-motion: reduce) { .nf-card.tlink, .nf-card.tlink::after, .pv-flag { transition: none; } }
@media (forced-colors: active) { .nf-map { display: none; } }
.moved { flex: 1 0 auto; }
.moved > .wrap { padding-block: 64px; }
.motion .pv-head__main.is-in { transition-delay: 0ms; }
.motion .pv-head__lead.is-in, .motion .pv-sheet.is-in, .motion .nf-slip.is-in { transition-delay: var(--t-stagger); }
.motion .pv-toc.is-in { transition-delay: calc(2 * var(--t-stagger)); }
.motion :where(.pv-flag) { opacity: 0; }
.motion .pv-sheet.is-in + .pv-flag {
  opacity: 1;
  transition: opacity var(--t-base) var(--e-out) calc(var(--t-stagger) + var(--t-slow)), translate var(--t-slow) var(--e-move);
}
.motion .mo-now.pv-sheet + .pv-flag { transition-delay: 0ms; }
.nf-cards { --mo-delay: 120ms; }
#what-you-have {
  --have-rule: rgb(10 12 17 / 0.14);                      
  --have-line: rgb(10 12 17 / 0.10);                      
  --have-mat: rgb(93 100 112 / 0.28);                     
  --have-grid: rgb(255 255 255 / 0.40);                   
  --have-grid-2: rgb(255 255 255 / 0.20);                 
  --have-gs: 24px; --have-gm: 96px;
}
.have-head .have-lead { margin-top: 24px; }
.have-steps { list-style: none; margin: 0; padding: 0; }
.have-step__t {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start;
  padding: 20px 0 24px; border-top: 1px solid var(--have-rule);
}
.have-step--3 .have-step__t { border-bottom: 1px solid var(--have-rule); }
.have-step__t > :not(.have-num) { grid-column: 2; }
.have-num { grid-column: 1; grid-row: 1 / span 3; }
.have-step__p { margin-top: 8px; }
.have-key { margin-top: 16px; }
.have-num, .have-tag, .want-tag, .want-lines__tagged::before, .want-key::before {
  display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); font-style: normal;
}
.have-num::before, .have-tag::before, .want-tag::before, .want-lines__tagged::before, .want-key::before {
  content: attr(data-n); color: var(--paper);
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.have-tag, .want-tag { position: absolute; z-index: 3; left: -13px; top: -13px; pointer-events: none; }
.have-zone { position: relative; container-type: inline-size; }
.have-zone > :not(.have-plate) { position: relative; }
.have-plate { display: none; }
.have-ob { position: relative; display: block; }
.have-ob > .gl { height: 100%; }
#what-you-have .have-inv { --gl-depth: var(--d-card); --have-pad: 28px; display: grid; padding: var(--have-pad); }
.have-inv__head { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.have-inv__logo { display: block; width: 24px; height: 24px; margin-top: 2px; background: var(--ink); }
.have-inv__ref { display: grid; min-width: 0; }
.have-inv__ref > * { white-space: nowrap; }
.have-inv__rules { display: grid; margin-top: 12px; }
.have-inv__rules > i { display: block; height: 32px; border-bottom: var(--c-hair2) solid var(--have-line); }
.have-inv__total {
  display: grid; justify-items: start; row-gap: 4px; margin-top: 24px; padding-top: 14px;
  background: linear-gradient(var(--ink), var(--ink)) left top / var(--have-rw, 100%) 2px no-repeat;
}
.have-inv__total .t-total { white-space: nowrap; }
.have-chip {
  display: inline-flex; align-items: center; column-gap: 8px; height: 30px; padding: 0 12px; white-space: nowrap;
  background: rgb(255 255 255 / 0.92); box-shadow: inset 0 0 0 1px rgb(10 12 17 / 0.14); color: var(--ink);
}
.have-chip > i { width: 10px; height: 10px; background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, var(--accent)); }
.have-stamp, .want-stamp {
  display: inline-flex; align-items: center; column-gap: 8px; align-self: flex-start; height: 28px; padding: 0 10px;
  box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); white-space: nowrap;
}
.have-stamp::before, .want-stamp::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--ink); }
.have-stamp--next { box-shadow: inset 0 0 0 1px var(--ink); }
.have-stamp--next::before { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.have-usdc { display: flex; flex-direction: column; row-gap: 4px; padding: 20px; }
.have-usdc__t { font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: -0.01em; }
.have-usdc .have-stamp { margin-top: auto; }
.have-slot { display: flex; flex-direction: column; justify-content: space-between; row-gap: 12px; padding: 18px; }
.have-slot__t { font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 15px; line-height: 20px; }
.have-note { display: block; margin-top: 12px; padding-top: 9px; font-family: var(--font-text); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--ink); }
.have-note__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(10 12 17 / 0.42); transform-origin: left center; }
.have-note__t { display: flex; align-items: baseline; column-gap: 8px; }
.have-note__t::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, var(--accent)); translate: 0 -1px; }
.have-bd__mat, .have-plate {
  background-color: var(--have-mat);
  background-image:
    linear-gradient(to right, var(--have-grid) var(--c-hair2), transparent var(--c-hair2)),
    linear-gradient(to bottom, var(--have-grid) var(--c-hair2), transparent var(--c-hair2)),
    linear-gradient(to right, var(--have-grid-2) var(--c-hair2), transparent var(--c-hair2)),
    linear-gradient(to bottom, var(--have-grid-2) var(--c-hair2), transparent var(--c-hair2));
  background-size: var(--have-gm) var(--have-gm), var(--have-gm) var(--have-gm), var(--have-gs) var(--have-gs), var(--have-gs) var(--have-gs);
  box-shadow: inset 1px 1px 0 rgb(10 12 17 / 0.10);
}
.have-bd__mat { display: none; }
@media (width >= 900px) {
  .have__grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto auto;
    column-gap: var(--c-gap); --have-split: 5;
  }
  .have-head { grid-column: 1 / var(--have-split); grid-row: 1; }
  .have-steps { grid-column: 1 / -1; grid-row: 1 / 5; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  .have-step--1 { grid-column: 1 / -1; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  .have-step--1 > .have-step__t { grid-column: 1 / var(--have-split); grid-row: 2; margin-top: 48px; }
  .have-step--2 { grid-column: 1 / var(--have-split); grid-row: 3; }
  .have-step--3 { grid-column: 1 / var(--have-split); grid-row: 4; }
  .have-zone { grid-column: var(--have-split) / -1; width: 100%; max-width: 1000px; }   
  .have-zone--1 { grid-row: 1 / 3; align-self: end; padding-bottom: 64px; }
  .have-zone--2 { grid-row: 3 / 5; align-self: center; }
  .have-zone--1 > .have-ob--usdc { position: absolute; }
  .have-bd__mat {
    display: block; position: absolute; right: 0;
    top: var(--have-mat-t, calc(var(--c-fold-y) + 64px)); bottom: var(--have-mat-b, calc(var(--c-fold-y) - 32px));
    left: var(--have-mat-l, 42%);
    background-position: 32px 32px;   
  }
}
@media (width >= 600px) {
  .have-zone--1 > .have-inv { width: var(--have-iw); }
  .have-zone--1 > .have-ob--usdc { left: calc(var(--have-iw) - var(--have-ov)); bottom: 0; width: var(--have-cw); height: 168px; }
  #what-you-have .have-inv { --have-rw: calc(100% - var(--have-ov) + var(--have-pad) - 12px); }
  .have-slots { display: grid; grid-template-columns: var(--have-sw) var(--have-sw); column-gap: calc(var(--have-c1r) - 2 * var(--have-sw)); width: var(--have-c1r); }
  .have-slots .have-ob { height: 136px; }
  .have-note { width: var(--have-c1r); }
  .have-zone {
    --have-c1r: calc(var(--have-iw) - var(--have-ov) + var(--have-cw));
    --have-sw: calc((var(--have-c1r) - 24px) / 2);
    --have-sw: round(down, calc((var(--have-c1r) - 24px) / 2), 1px);
  }
}
@media (width >= 1200px) {
  .have-zone {
    --have-iw: 60cqw; --have-iw: round(60cqw, 1px);
    --have-ov: 14cqw; --have-ov: round(14cqw, 1px);
    --have-cw: max(232px, 32cqw); --have-cw: max(232px, round(32cqw, 1px));
    --have-sw: 36cqw; --have-sw: round(36cqw, 1px);
  }
}
@media (900px <= width < 1200px) {
  .have__grid { --have-split: 6; }
  .have-step--1 > .have-step__t { margin-top: 40px; }
  #what-you-have .have-inv { --have-pad: 24px; }
  .have-zone { --have-iw: round(66cqw, 1px); --have-ov: round(16cqw, 1px); --have-cw: 232px; }   
}
@media (600px <= width < 900px) {
  #what-you-have .have-inv { --have-pad: 24px; }
  .have-zone { --have-iw: 62cqw; --have-iw: round(62cqw, 1px); --have-ov: 14cqw; --have-ov: round(14cqw, 1px); --have-cw: 36cqw; --have-cw: round(36cqw, 1px); }
  .have-zone--1 { padding-bottom: 64px; }
  .have-zone--1 > .have-ob--usdc { position: absolute; }
}
@media (width < 900px) {
  .have-steps { margin-top: 40px; }
  .have-zone--1 { margin-top: 40px; margin-bottom: 72px; }
  .have-zone--2 { margin-top: 48px; }
  .have-plate {
    display: block; position: absolute; left: -100vw; right: calc(-1 * max(var(--gutter), env(safe-area-inset-right))); bottom: -32px;
    --have-gs: 16px; --have-gm: 64px;
    background-position: round(var(--gutter), 1px) 0;
  }
  .have-zone--1 > .have-plate { top: 64px; }      
  .have-zone--2 > .have-plate { top: 48px; }      
}
@media (width < 600px) {
  .have-head .have-lead { margin-top: 16px; }
  .have-steps { margin-top: 32px; }
  .have-zone--1 { margin-top: 32px; margin-bottom: 64px; }
  .have-zone--1 > .have-plate { top: 56px; background-position: round(var(--gutter), 1px) 8px; }   
  .have-zone--2 { margin-top: 40px; }
  #what-you-have .have-inv { --have-pad: 20px; padding-bottom: 36px; }   
  .have-inv__head { column-gap: 10px; }
  .have-chip { padding: 0 10px; }
  .have-zone--1 > .have-ob--usdc { width: 74cqw; width: round(74cqw, 1px); height: 148px; margin: -20px 0 0 auto; }
  .have-tag { left: -8px; top: -8px; }
  .have-slots { display: grid; row-gap: 12px; }
  .have-slots .have-ob { height: 64px; }
  .have-slot { flex-direction: row; align-items: center; column-gap: 12px; padding: 0 18px; }
  .have-usdc .have-stamp::before { background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, var(--accent)); }
  .have-zone--2 { display: flex; flex-direction: column; }
  .have-zone--2 > .have-note { order: -1; margin: 0 0 12px; padding: 0 0 9px; }
  .have-zone--2 .have-note__rule { top: auto; bottom: 0; }   
  .have-zone--2 > .have-plate { top: 89px; }
}
@media (width < 420px) {
  .have-slots .have-ob { height: 92px; }
  .have-slot { flex-direction: column; align-items: flex-start; justify-content: center; row-gap: 10px; }
}
@media (width < 360px) {
  .have-slot, .have-usdc { padding-inline: 16px; }
}
#what-you-want {
  --want-p: 56px; --want-rows: 8;
  --want-by: 2; --want-ly: 3; --want-band1: 4;               
  --want-band2: 6;                                           
  --want-line: rgb(10 12 17 / 0.10);
}
.want-h2 { max-width: 12em; }
.want-lead { margin-top: 24px; }
.want-lines { list-style: none; margin: 0; padding: 0; }
.want-lines > li, .want-key { position: relative; padding: 20px 0; border-top: 1px solid var(--want-line); }
.want-lines > li:last-child { padding-bottom: 24px; }
.want-key { padding-bottom: 0; max-width: 36rem; }
.want-lines__tagged::before, .want-key::before { position: absolute; left: 0; top: -14px; }
.want-lines__tagged, .want-key { padding-top: 24px; }
.want-draw { position: relative; height: calc(var(--want-rows) * var(--want-p)); }
.want-draw > * { position: absolute; }
.want-plate { display: block; top: 0; bottom: 0; left: -100vw; right: 0; background: var(--mist); pointer-events: none; }
.want-plate > i { position: absolute; display: block; }
.want-plate__rules {
  top: 0; bottom: 0; right: 0; left: calc(100vw - var(--gutter));   
  background: linear-gradient(to bottom, rgb(10 12 17 / 0.06) 1px, transparent 1px) 0 0 / 100% var(--want-p);
  transform-origin: left center;
}
.want-plate__margin { top: 0; bottom: 0; left: calc(100vw - 25px); width: 5px; box-shadow: inset 1px 0 0 rgb(10 12 17 / 0.10), inset -1px 0 0 rgb(10 12 17 / 0.10); }
.want-band { left: 0; right: 0; height: var(--want-p); background: rgb(93 100 112 / 0.25); }
.want-band--1 { top: calc(var(--want-band1) * var(--want-p)); }
.want-band--2 { top: calc(var(--want-band2) * var(--want-p)); }
.want-plate > .want-band--2 { display: none; }
.want-ob { display: block; }
.want-ob > .gl { height: 100%; }
.want-ob--bank { left: 0; top: calc(var(--want-by) * var(--want-p)); width: var(--want-bw); height: calc(3 * var(--want-p)); }
.want-ob--ldg { left: var(--want-lx); top: calc(var(--want-ly) * var(--want-p)); width: var(--want-lw); height: calc(3 * var(--want-p)); }
.want-bank { display: grid; grid-template-rows: repeat(3, var(--want-p)); padding: 0 24px; }
.want-bank__row { display: flex; align-items: center; justify-content: space-between; column-gap: 12px; min-width: 0; }
.want-bank__row + .want-bank__row { box-shadow: inset 0 1px 0 var(--want-line); }
.want-bank__row .t-ob-k { white-space: nowrap; }
.want-bank__v {
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: var(--ty-ob-lg); line-height: var(--ty-ob-lg-lh);
  letter-spacing: 0.08em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.want-ldg { display: grid; grid-template-rows: repeat(3, var(--want-p)); padding: 0 16px; }
.want-ldg::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); }
.want-ldg__row {
  display: grid; grid-template-columns: 36fr 32fr 32fr; align-items: center; min-width: 0;
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: var(--ty-ob-lg); line-height: var(--ty-ob-lg-lh);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.005em; white-space: nowrap;
}
.want-ldg__row + .want-ldg__row { box-shadow: inset 0 1px 0 var(--want-line); }
.want-ldg__row > :not(:first-child) { justify-self: end; }
.want-ldg__row--head { font-size: 13px; line-height: 18px; letter-spacing: 0; color: var(--grey); }
.want-ldg__match { position: relative; z-index: 0; display: inline-block; }
.want-ldg__match::before {
  content: ""; position: absolute; z-index: -1; left: -2px; right: -2px; top: 0; bottom: 0;
  background: linear-gradient(to bottom, transparent 0 52%, var(--accent) 52% 94%, transparent 94%);
}
.want-ldg__rcv { display: inline-block; }
.want-bank__row .want-stamp { align-self: center; }
@media (width >= 900px) {
  .want__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); }
  .want-draw { grid-column: 1 / 8; }
  .want-words { grid-column: 8 / -1; }
}
@media (width >= 1200px) {
  .want-h2 { grid-column: 8 / -1; grid-row: 1; }
  .want-lead { grid-column: 8 / -1; grid-row: 2; }
  .want-words { grid-row: 3; margin-top: 32px; }
  .want-draw { grid-row: 1 / 4; align-self: center; }
  #what-you-want { --want-bw: min(336px, round(44.4%, 1px)); }
  .want-draw { --want-lx: calc(var(--want-bw) + 24px); --want-lw: min(372px, calc(100% - var(--want-bw) - 48px)); }
}
@media (900px <= width < 1200px) {
  #what-you-want { --want-p: 48px; }
  .want-h2 { grid-column: 1 / 8; grid-row: 1; align-self: end; max-width: 14em; }
  .want-lead { grid-column: 8 / -1; grid-row: 1; align-self: end; margin-top: 0; }
  .want-draw, .want-words { grid-row: 2; margin-top: 56px; align-self: center; }
  .want-draw { --want-lw: max(263px, 50%); --want-lx: calc(100% - var(--want-lw) - 16px); --want-bw: calc(var(--want-lx) - 16px); }
  .want-bank { padding: 0 16px 0 20px; }   
}
@media (width < 900px) {
  #what-you-want { --want-p: 44px; }
  .want-draw { margin-top: 40px; }
  .want-words { margin-top: 40px; }
  .want-plate { right: calc(-1 * max(var(--gutter), env(safe-area-inset-right))); }   
  .want-plate__margin { display: none; }
  .want-draw { --want-bw: 45%; --want-bw: round(45%, 1px); --want-lx: calc(var(--want-bw) + 16px); --want-lw: calc(100% - var(--want-bw) - 16px); }
  .want-bank { padding: 0 16px 0 24px; }   
}
@media (width < 600px) {
  #what-you-want { --want-rows: 9; --want-by: 1; --want-ly: 5; --want-band1: 3; --want-band2: 6; }
  .want-lead { margin-top: 16px; }
  .want-draw { margin-top: 32px; --want-bw: 100%; --want-lx: 24px; --want-lw: calc(100% - 24px); }
  .want-words { margin-top: 32px; }
  .want-tag { left: -8px; top: -8px; }
  .want-plate > .want-band--2 { display: block; }
}
@media (width < 360px) {
  .want-draw { --want-lx: 0px; --want-lw: 100%; }
}
.motion :where(#what-you-have .have-zone--1 .have-inv) { opacity: 0; translate: 0 calc(-1 * var(--rise-s)); }
.motion :where(#what-you-have .have-zone--1 .have-ob--usdc) { translate: var(--rise-l) 0; }
.motion :where(#what-you-have .have-ob > *) { opacity: 0; }
.motion :where(#what-you-have .have-note__rule) { scale: 0 1; }
.motion :where(#what-you-have .have-note__t) { opacity: 0; }
.motion #what-you-have .have-zone--1.is-in .have-inv {
  opacity: 1; translate: none;
  transition: opacity var(--t-base) var(--e-out) 60ms, translate var(--t-slow) var(--e-out) 60ms;
}
.motion #what-you-have .have-zone--1.is-in .have-ob--usdc { translate: none; transition: translate var(--t-slow) var(--e-out) 300ms; }
.motion #what-you-have .have-zone.is-in .have-ob > * { opacity: 1; transition: opacity var(--t-base) var(--e-out) var(--have-d, 0ms); }
.have-ob--usdc { --have-d: 300ms; }
.have-ob--s3 { --have-d: 60ms; }
.motion #what-you-have .have-zone--2.is-in .have-note__rule { scale: none; transition: scale var(--t-draw) var(--e-move) 120ms; }
.motion #what-you-have .have-zone--2.is-in .have-note__t { opacity: 1; transition: opacity var(--t-base) var(--e-out) 420ms; }
.motion :where(#what-you-want .want-plate__rules) { scale: 0 1; }
.motion :where(#what-you-want .want-ob) { translate: 0 var(--rise); }
.motion :where(#what-you-want .want-ob > *) { opacity: 0; }
.motion :where(#what-you-want .want-stamp) { opacity: 0; scale: 1.2; }
.motion :where(#what-you-want .want-ldg__rcv) { opacity: 0; translate: 0 -8px; }
.motion #what-you-want .want-ldg__match::before { opacity: 0; }
.want-ob--bank { --want-d: 120ms; }
.want-ob--ldg { --want-d: 240ms; }
.want-ldg__row--2 { --want-d: 720ms; }
.motion #what-you-want .want-draw.is-in .want-plate__rules { scale: none; transition: scale var(--t-draw) var(--e-move); }
.motion #what-you-want .want-draw.is-in .want-ob { translate: none; transition: translate var(--t-slow) var(--e-out) var(--want-d); }
.motion #what-you-want .want-draw.is-in .want-ob > * { opacity: 1; transition: opacity var(--t-base) var(--e-out) var(--want-d); }
.motion #what-you-want .want-draw.is-in .want-stamp {
  opacity: 1; scale: none; transition: opacity var(--t-fast) var(--e-out) 480ms, scale var(--t-base) var(--e-move) 480ms;
}
.motion #what-you-want .want-draw.is-in .want-ldg__rcv {
  opacity: 1; translate: none;
  transition: opacity var(--t-base) var(--e-out) var(--want-r, 600ms), translate var(--t-slow) var(--e-out) var(--want-r, 600ms);
}
.want-ldg__row--2 .want-ldg__rcv { --want-r: 720ms; }
.motion #what-you-want .want-draw.is-in .want-ldg__match::before { opacity: 1; transition: opacity var(--t-base) var(--e-out) 1000ms; }
.is-moving .want-ob, .is-moving .have-ob--usdc { will-change: translate; }
#the-idea { container-type: inline-size; }   
.idea__grid {
  --idea-wrap: min(100cqw - 2 * clamp(16px, 4.4cqw, 72px), 1776px);
  --idea-cw: 420px;                      
  --idea-m: 60px;                        
  --idea-gap: 32px;                      
  --idea-below: 0px;                     
  --idea-s: min(256px, var(--idea-wrap) - 64px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
}
@supports (width: round(1.5px, 1px)) { .idea__grid { --idea-s: round(min(256px, var(--idea-wrap) - 64px), 2px); } }
@media (width > 1920px) { .idea__grid { --idea-wrap: calc(100cqw - 144px); } }
#the-idea .idea__h2 { position: relative; z-index: 2; max-width: 14em; margin: 0; }
#the-idea .idea__lead { position: relative; z-index: 2; color: var(--c-soft-ink); margin-top: 24px; }
#the-idea .idea__key {
  position: relative; z-index: 2; margin-top: var(--c-head-gap); max-width: 22em;
  color: var(--accent); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.idea-ledge { display: none; }
.idob { position: relative; z-index: 2; display: grid; grid-template-rows: auto auto 1fr; align-content: start; min-width: 0; }
.idob__h {
  margin: 0; padding: 17px 24px; border-bottom: 1px solid var(--idob-line);
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 13px; line-height: 18px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--idob-head);
}
.idob__v {
  margin: 0; padding: 24px 24px 16px;
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 30px; line-height: 34px;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--idob-fg); text-wrap: balance;
}
.idob__p {
  margin: 0 24px; padding: 16px 0 24px; border-top: 1px solid var(--idob-line);
  font-size: 17px; line-height: 28px; color: var(--idob-soft); text-wrap: pretty;
}
.idob--agree { --idob-line: rgb(10 12 17 / 0.12); --idob-head: var(--ink); --idob-fg: var(--ink); --idob-soft: color-mix(in srgb, var(--grey) 72%, var(--ink)); }   
.idob--fund, .idob--out { --idob-line: rgb(255 255 255 / 0.10); --idob-head: rgb(255 255 255 / 0.72); --idob-fg: var(--paper); --idob-soft: var(--c-soft-ink); }
.idea__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.idea__ap { position: relative; display: grid; place-items: center; min-height: 96px; }
.ap__svg { position: relative; z-index: 1; display: block; width: var(--idea-m); height: var(--idea-m); fill: var(--paper); }
.ap__svg path { shape-rendering: crispEdges; }
#the-idea .ap__big {
  --s: var(--idea-s); --ap-fill: #232833; --ap-edge: rgb(255 255 255 / 0.10);
  z-index: 0; left: calc(50% - var(--s) / 2); top: calc(50% - var(--s) / 2);
}
@supports (width: round(1.5px, 1px)) {
  #the-idea .ap__big { left: round(calc(50% - var(--s) / 2), 1px); top: round(calc(50% - var(--s) / 2), 1px); }
}
.idea__drop {
  position: absolute; z-index: 1; left: calc(50% - 1px); top: calc(-1 * var(--idea-gap)); display: none;
  width: 2px; height: calc(var(--idea-gap) + 50%); background: var(--paper);
}
.idea__line { position: absolute; z-index: 1; left: calc(50% - 54px); right: calc(50% - 54px); top: calc(50% - 2px); height: 4px; background: var(--accent); }
@supports (width: round(1.5px, 1px)) {
  .idea__line { top: round(calc(50% - 2px), 1px); }
  .idea__drop { left: round(calc(50% - 1px), 1px); }
}
@media (width < 600px) {
  .idob--agree .idob__p { display: flex; align-items: baseline; column-gap: 10px; }
  .idob--agree .idob__p::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, var(--accent)); translate: 0 -1px; }
  .idea__grid > * { grid-column: 1 / -1; }   
  .idea__h2 { grid-row: 1; }
  .idea-ledge {
    display: block; grid-row: 2; align-self: end; height: 56px; margin: 0 calc(-1 * var(--gutter)) 24px;
    background: #232833; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10), inset 0 -1px 0 rgb(255 255 255 / 0.10);
  }
  .idob--agree { grid-row: 2; justify-self: center; width: calc(100% - 40px); margin-top: 28px; }
  .idea__ap { min-height: calc(var(--idea-s) - 40px); }
  #the-idea .idea__lead { grid-row: 3; margin-top: 28px; }
  .idea__row { grid-row: 4; margin-top: 32px; }
  #the-idea .idea__key { grid-row: 5; margin-top: 36px; }
  .idob__h { padding: 13px 16px; }
  .idob__v { padding: 16px 16px 12px; font-size: 22px; line-height: 26px; }
  .idob__p { margin: 0 16px; padding: 12px 0 16px; font-size: 16px; line-height: 26px; }
}
@media (600px <= width < 900px) {
  .idea__grid { --idea-m: 80px; --idea-gap: 64px; --idea-below: 132px; --idea-s: calc(var(--idea-wrap) * 0.743); }
  #the-idea .idea__h2 { grid-row: 1; }
  #the-idea .idea__lead { grid-row: 2; }
  .idob--agree { grid-row: 3; justify-self: center; width: min(100%, var(--idea-s) - 96px); margin-top: 40px; }
  .idea__row { grid-row: 4; margin-top: var(--idea-gap); grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); column-gap: 16px; }
  .idea__ap { min-height: 0; }
  .idea__drop { display: block; }
  .idea__line { left: -16px; right: -16px; }
  #the-idea .idea__key { grid-row: 5; justify-self: center; text-align: center; margin-top: max(var(--c-head-gap), calc(var(--idea-below) + 40px)); }
  .idob__h { padding: 13px 16px; }
  .idob__v { padding: 16px 16px 12px; font-size: 22px; line-height: 27px; }
  .idob__p { margin: 0 16px; padding: 12px 0 16px; font-size: 16px; line-height: 26px; }
}
@supports (width: round(1.5px, 1px)) {
  @media (600px <= width < 900px) { .idea__grid { --idea-s: round(calc(var(--idea-wrap) * 0.743), 2px); } }
}
@media (width >= 900px) {
  .idea__grid {
    --idea-m: 104px; --idea-gap: 48px; --idea-below: 88px;
    --idea-s: calc((min((var(--idea-wrap) - 48px) / 3, var(--idea-cw)) / 2 + 24px) * 2.4676);
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap);
  }
  #the-idea .idea__h2 { grid-column: 1 / span 4; grid-row: 1; max-width: none; }
  .idob--agree { grid-column: 5 / span 4; grid-row: 1; align-self: end; justify-self: center; width: min(100%, var(--idea-cw)); }
  #the-idea .idea__lead { grid-column: 9 / -1; grid-row: 1; margin: 0; }
  .idea__row {
    grid-column: 1 / -1; grid-row: 2; margin-top: var(--idea-gap);
    grid-template-columns: repeat(3, minmax(0, var(--idea-cw))); justify-content: center; column-gap: var(--c-gap);
  }
  .idea__ap { min-height: 0; }
  .idea__drop { display: block; }
  .idea__line { left: calc(-1 * var(--c-gap)); right: calc(-1 * var(--c-gap)); }
  #the-idea .idea__key { grid-column: 1 / -1; grid-row: 3; justify-self: center; text-align: center; margin-top: max(var(--c-head-gap), calc(var(--idea-below) + 40px)); }
  .idob__h { padding: 15px 20px; }
  .idob__v { padding: 20px 20px 14px; font-size: 26px; line-height: 30px; }
  .idob__p { margin: 0 20px; padding: 14px 0 20px; font-size: 16px; line-height: 26px; }
}
@supports (width: round(1.5px, 1px)) {
  @media (width >= 900px) { .idea__grid { --idea-s: round(calc((min((var(--idea-wrap) - 48px) / 3, var(--idea-cw)) / 2 + 24px) * 2.4676), 2px); } }
}
@media (width >= 1200px) {
  .idea__grid { --idea-m: 152px; --idea-gap: 96px; --idea-below: 176px; }
  .idob__h { padding: 17px 24px; }
  .idob__v { padding: 24px 24px 16px; font-size: 30px; line-height: 34px; }
  .idob__p { margin: 0 24px; padding: 16px 0 24px; font-size: 17px; line-height: 28px; }
}
@media (width >= 1800px) {
  .idea__grid { --idea-cw: 460px; }
  .idob__v { font-size: 32px; line-height: 38px; }
  .idob__p { font-size: 18px; line-height: 29px; }
}
.motion :where(#the-idea .idob--agree) { opacity: 0; translate: 0 calc(-1 * var(--rise-s)); }
.motion #the-idea .idob--agree.is-in { opacity: 1; translate: none; transition: opacity var(--t-base) var(--e-out), translate var(--t-slow) var(--e-out); }
.motion :where(#the-idea .ap__big, #the-idea .ap__svg) { opacity: 0; scale: 0.96; }
.motion #the-idea .idea__ap.is-in :is(.ap__big, .ap__svg) { opacity: 1; scale: none; transition: opacity var(--t-base) var(--e-out), scale var(--t-slow) var(--e-out); }
.motion :where(#the-idea .idea__drop) { scale: 1 0; transform-origin: 50% 0; }
.motion #the-idea .idea__ap.is-in .idea__drop { scale: none; transition: scale var(--t-draw) var(--e-move) 60ms; }
.motion :where(#the-idea .idea__line) { scale: 0 1; transform-origin: 0 50%; }
.motion #the-idea .idea__ap.is-in .idea__line { scale: none; transition: scale var(--t-draw) var(--e-move) 520ms; }
@media (width >= 600px) {
  .motion :where(#the-idea .idob--fund) { opacity: 0; translate: var(--rise-l) 0; }
  .motion :where(#the-idea .idob--out) { opacity: 0; translate: calc(-1 * var(--rise-l)) 0; }
  .motion #the-idea .idea__row:has(.idea__ap.is-in) :is(.idob--fund, .idob--out) {
    opacity: 1; translate: none;
    transition: opacity var(--t-base) var(--e-out) var(--t-beat), translate var(--t-slow) var(--e-out) var(--t-beat);
  }
}
@media (width < 600px) {
  .motion :where(#the-idea .idob--fund, #the-idea .idob--out) { opacity: 0; translate: 0 var(--rise); }
  .motion #the-idea :is(.idob--fund, .idob--out).is-in { opacity: 1; translate: none; transition: opacity var(--t-base) var(--e-out), translate var(--t-slow) var(--e-out); }
  .motion #the-idea .idea__ap.is-in .idea__line { transition-delay: var(--t-beat); }
}
.does { --does-fill: rgb(93 100 112 / 0.16); --does-line: rgb(10 12 17 / 0.07); --does-hair: rgb(10 12 17 / 0.10); }
.does__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
#what-it-does .does__head { margin: 0; max-width: 15em; }
.does__list { display: grid; row-gap: 72px; margin: var(--c-head-gap) 0 0; padding: 0; list-style: none; }
.cap { position: relative; }
.cap__text { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; }
.cap__n { font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.cap__h { grid-column: 2; margin: 0; font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; text-wrap: balance; }
.cap__lines { grid-column: 2; display: grid; row-gap: 12px; margin-top: 12px; }
.cap__lines p { margin: 0; max-width: 36rem; font-size: 17px; line-height: 28px; text-wrap: pretty; }
.pay {
  --pay-pad: 24px; --pay-id: 22px; --pay-id-lh: 28px; --pay-row: 52px; --pay-tx: 16px; --pay-tx-lh: 24px;
  --pay-fig: var(--ty-fig-xl); --pay-fig-lh: var(--ty-fig-xl-lh);
  color: var(--ink); font-size: var(--pay-tx); line-height: var(--pay-tx-lh); font-variant-numeric: tabular-nums;
}
.pay__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: var(--pay-pad) var(--pay-pad) 16px; }
.pay__id, .pay__amt {
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: var(--pay-id); line-height: var(--pay-id-lh);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.pay__sum { display: grid; justify-items: end; row-gap: 2px; }
.pay__due { font-size: 13px; line-height: 18px; color: var(--grey); white-space: nowrap; }
.pay__prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; margin: 0 var(--pay-pad); }
.pay__prog i { position: relative; display: block; height: 4px; background: var(--does-hair); }
.pay__prog i::after { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity var(--t-base) var(--e-out); }
.pay[data-s="1"] .pay__prog i:nth-child(-n+1)::after,
.pay[data-s="2"] .pay__prog i:nth-child(-n+2)::after,
.pay[data-s="3"] .pay__prog i:nth-child(-n+3)::after,
.pay[data-s="4"] .pay__prog i:nth-child(-n+4)::after { opacity: 1; }
.pay__tab {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; min-height: 40px;
  padding: 8px var(--pay-pad); background: var(--mist); box-shadow: inset 0 -1px 0 var(--does-hair);
}
.pay__tab-id { display: inline-flex; align-items: center; column-gap: 8px; font-weight: 600; font-size: 15px; line-height: 22px; letter-spacing: -0.01em; white-space: nowrap; }
.pay__dot { width: 4px; height: 4px; background: var(--grey); }
.pay__tab .pay__prog { margin: 0; justify-self: end; width: min(100%, 160px); }
.pay--one > .pay__face { padding: 4px var(--pay-pad) var(--pay-pad); }
.pay--one > .pay__prog + .pay__face { margin-top: 16px; box-shadow: inset 0 1px 0 var(--does-hair); padding-top: 4px; }
.face { margin: 0; padding: 0; list-style: none; }
.fr { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-height: var(--pay-row); border-bottom: var(--c-hair2) solid var(--does-hair); font-weight: 500; }
.fr .sq, .fc .sq, .face--rec .sq { width: 12px; height: 12px; }
.tick { display: block; width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: square; }
.fr--todo { grid-template-rows: auto auto; align-items: start; min-height: 0; padding-top: 14px; border-bottom: 0; font-weight: 600; }
.fr--todo .sq { margin-top: calc(var(--pay-tx-lh) / 2 - 6px); }
.fr__t { grid-column: 2; }
.fr__next { grid-column: 2; display: flex; align-items: center; column-gap: 8px; margin-top: 6px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--grey); }
.fr__arrow { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: square; }
.face--exact { display: grid; row-gap: 12px; padding-top: 16px; }
.fx { display: grid; row-gap: 6px; padding: 14px 20px 18px; background: rgb(10 12 17 / 0.03); box-shadow: inset 0 0 0 1px var(--does-hair); }
.fx__k { display: inline-flex; align-items: center; column-gap: 10px; font-size: 13px; line-height: 18px; color: var(--grey); }
.fx__amt { font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: var(--pay-fig); line-height: var(--pay-fig-lh); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.fx--in { background: #0E1118; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px rgb(10 12 17 / 0.20), 0 12px 24px -14px rgb(10 12 17 / 0.40); color: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.fx--in .fx__k { color: var(--paper); font-weight: 600; }
.fx--in .sq--acc { width: 12px; height: 12px; box-shadow: none; }
.face--ctl { display: grid; }
.fc { margin: 0; padding: 0; list-style: none; }
.fc > li { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; column-gap: 16px; min-height: var(--pay-row); border-bottom: var(--c-hair2) solid var(--does-hair); font-weight: 600; }
.fc__stamp {
  justify-self: end; margin-top: 24px; display: inline-flex; align-items: center; column-gap: 10px; padding: 8px 14px;
  background: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink);
  font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: 0.01em; white-space: nowrap;
}
.fc__stamp::before { content: ""; width: 10px; height: 10px; background: var(--ink); }
.face--rec { position: relative; display: grid; }
.face--rec::before { content: ""; position: absolute; left: 5px; top: calc(var(--pay-row) / 2); bottom: calc(var(--pay-row) / 2); width: 2px; background: var(--ink); transform-origin: 50% 0; }
.face--rec > li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; column-gap: 16px; min-height: var(--pay-row); font-weight: 600; }
.face--rec > li + li { border-top: 1px dashed rgb(10 12 17 / 0.16); }
.face--rec .sq { position: relative; z-index: 1; }
.cap__ob {
  --b1: var(--mist); --b2: var(--mist); --b3: var(--mist); --b4: var(--mist);
  display: grid; margin: 24px calc(-1 * var(--gutter)) 0; padding: 32px var(--gutter);
  background: linear-gradient(to right,
    var(--b1) 0 calc(25% - 1px), var(--does-line) calc(25% - 1px) 25%,
    var(--b2) 25% calc(50% - 1px), var(--does-line) calc(50% - 1px) 50%,
    var(--b3) 50% calc(75% - 1px), var(--does-line) calc(75% - 1px) 75%,
    var(--b4) 75% 100%);
}
.cap__ob[data-s="1"] { --b1: var(--does-fill); }
.cap__ob[data-s="2"] { --b1: var(--does-fill); --b2: var(--does-fill); }
.cap__ob[data-s="3"] { --b1: var(--does-fill); --b2: var(--does-fill); --b3: var(--does-fill); }
.cap__ob[data-s="4"] { --b1: var(--does-fill); --b2: var(--does-fill); --b3: var(--does-fill); --b4: var(--does-fill); }
.pay--one { width: 100%; max-width: 560px; }
.does__stage { display: none; }
@media (600px <= width < 900px) {
  .cap__ob { padding-block: 40px; }
  .pay--one { margin-left: 44px; width: calc(100% - 44px); }
  .pay { --pay-id: 22px; --pay-id-lh: 28px; }
}
@media (width < 600px) {
  .does__list { row-gap: 56px; }
  .cap__text { grid-template-columns: 36px minmax(0, 1fr); }
  .cap__h { font-size: 18px; line-height: 25px; }
  .cap__lines p { font-size: 16px; line-height: 26px; }
  .cap__ob { padding-block: 28px; }
  .pay { --pay-pad: 16px; --pay-id: 20px; --pay-id-lh: 24px; --pay-row: 48px; }
  .pay__tab { column-gap: 16px; }
  .fx { padding: 12px 16px 16px; }
  .fr, .fc > li, .face--rec > li { column-gap: 14px; }
}
@media (width >= 900px) {
  .stage-on .does__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); }
  .stage-on #what-it-does .does__head { grid-column: 1 / span 5; grid-row: 1; }
  .stage-on .does__list { grid-column: 1 / span 5; grid-row: 2; row-gap: 0; margin-top: 24px; position: relative; }
  .stage-on .cap { display: grid; align-content: center; min-height: max(520px, 80vh); padding-block: 40px; }
  .stage-on .cap__ob { display: none; }
  .stage-on .cap__h { font-size: var(--ty-h3-pin); line-height: var(--ty-h3-pin-lh); }
  .stage-on .cap__lines p { font-size: 18px; line-height: 29px; }
  .stage-on .cap__text > * { transition: color var(--t-base) var(--e-out); }
  .stage-on .cap:not(.is-on) .cap__text > * { color: var(--grey); }
  .stage-on .cap:not(.is-on) .hl { color: var(--ink); }
  .stage-on .does__list::before { content: ""; position: absolute; left: -24px; top: 40px; bottom: 40px; width: 1px; background: var(--hairline); }
  .stage-on .cap::before { content: ""; position: absolute; left: -25px; top: calc(50% - 32px); width: 3px; height: 64px; background: var(--ink); scale: 1 0; transition: scale var(--t-base) var(--e-out); }
  .stage-on .cap.is-on::before { scale: none; }
  .stage-on .does__stage { display: block; grid-column: 7 / -1; grid-row: 1 / span 2; position: relative; }
  .does-plate { position: absolute; top: calc(-1 * var(--c-fold-y)); bottom: calc(-1 * var(--c-fold-y)); left: -40px; right: calc(-1 * var(--gutter)); display: block; background: var(--mist); pointer-events: none; }
  .does-plate > i { position: absolute; top: 0; bottom: 0; width: 25%; display: block; }
  .does-plate > i:nth-child(2) { left: 25%; } .does-plate > i:nth-child(3) { left: 50%; } .does-plate > i:nth-child(4) { left: 75%; }
  .does-plate > i + i { box-shadow: inset 1px 0 0 var(--does-line); }
  .does-plate > i::after { content: ""; position: absolute; inset: 0; background: var(--does-fill); opacity: 0; transition: opacity var(--t-base) var(--e-out) var(--t-stagger); }
  .does-plate > i + i::after { left: 1px; }
  .does__stage[data-s="1"] .does-plate > i:nth-child(-n+1)::after,
  .does__stage[data-s="2"] .does-plate > i:nth-child(-n+2)::after,
  .does__stage[data-s="3"] .does-plate > i:nth-child(-n+3)::after,
  .does__stage[data-s="4"] .does-plate > i:nth-child(-n+4)::after { opacity: 1; }
  .does__stage { --pay-h: 404px; }
  .does__pin {
    position: sticky; height: var(--pay-h); display: grid; place-items: center;
    top: calc(var(--topbar-h) + (100svh - var(--topbar-h) - var(--pay-h)) / 2);
    top: round(down, calc(var(--topbar-h) + (100svh - var(--topbar-h) - var(--pay-h)) / 2), 1px);
  }
  .pay--stage {
    --pay-w: 440px; --pay-over: 80px; --pay-id: 24px; --pay-id-lh: 28px; --pay-row: 52px; --pay-tx: 16px; --pay-tx-lh: 24px;
    position: relative; display: grid; width: calc(var(--pay-w) + 40px); max-width: 100%;
  }
  .pay__doc { width: calc(100% - 40px); }
  .pay__rules { display: grid; margin: 12px var(--pay-pad) var(--pay-pad); }
  .pay__rules > i { display: block; height: 28px; border-bottom: 1px solid rgb(10 12 17 / 0.08); }
  .does__stage .pay__body { display: grid; width: calc(100% - 40px); margin: calc(-1 * var(--pay-over)) 0 0 40px; padding: 8px var(--pay-pad) var(--pay-pad); }
  .does__stage .pay__body > .pay__face { grid-area: 1 / 1; min-width: 0; }
  .does__stage .pay__face { opacity: 0; translate: 0 var(--rise-s); pointer-events: none; transition: opacity var(--t-fast) var(--e-out), translate 0s linear var(--t-fast); }
  .does__stage .pay[data-s="1"] .pay__face[data-s="1"],
  .does__stage .pay[data-s="2"] .pay__face[data-s="2"],
  .does__stage .pay[data-s="3"] .pay__face[data-s="3"],
  .does__stage .pay[data-s="4"] .pay__face[data-s="4"] {
    opacity: 1; translate: none; pointer-events: auto;
    transition: opacity var(--t-base) var(--e-out) var(--t-beat), translate var(--t-slow) var(--e-out) var(--t-beat);
  }
}
@media (900px <= width < 1200px) {
  .stage-on #what-it-does .does__head { grid-column: 1 / -1; max-width: 22em; }
  .stage-on .does__stage { grid-column: 6 / -1; grid-row: 2; --pay-h: 396px; }
  .does-plate { top: 0; left: -12px; }
}
@media (width >= 1200px) {
  .pay--stage { --pay-w: 518px; --pay-over: 88px; --pay-id: 28px; --pay-id-lh: 32px; --pay-row: 56px; --pay-tx: 17px; --pay-tx-lh: 26px; }
}
@media (width >= 900px) and (max-height: 760px) {
  .pay--stage { --pay-row: 48px; --pay-over: 72px; --pay-fig: 46px; --pay-fig-lh: 46px; --pay-tx: 16px; --pay-tx-lh: 24px; }
  .pay--stage .pay__head { padding-block: 16px 12px; }
  .pay__rules { margin-block: 8px 16px; }
  .pay__rules > i { height: 24px; }
  .does__stage .fx { padding-block: 12px 14px; }
}
@media (width >= 1800px) and (min-height: 900px) {
  .pay--stage { --pay-w: 580px; --pay-over: 100px; --pay-id: 32px; --pay-id-lh: 36px; --pay-row: 64px; --pay-tx: 18px; --pay-tx-lh: 28px; --pay-fig: 60px; --pay-fig-lh: 60px; --pay-pad: 28px; }
  .stage-on .cap__lines p { font-size: 19px; line-height: 30px; }
}
.motion :where(#what-it-does .cap__ob .pay) { opacity: 0; translate: 0 var(--rise); }
.motion #what-it-does .cap__ob.is-in .pay { opacity: 1; translate: none; transition: opacity var(--t-base) var(--e-out), translate var(--t-slow) var(--e-out); }
.motion :where(#what-it-does .does__stage .pay__doc, #what-it-does .does__stage .pay__body) { opacity: 0; translate: 0 var(--rise); }
.motion #what-it-does .does__stage.is-in :is(.pay__doc, .pay__body) {
  opacity: 1; translate: none;
  transition: opacity var(--t-base) var(--e-out) var(--t-stagger), translate var(--t-slow) var(--e-out) var(--t-stagger);
}
.fr:nth-child(1), .fc > li:nth-child(1), .face--rec > li:nth-child(1) { --j: 0; }
.fr:nth-child(2), .fc > li:nth-child(2), .face--rec > li:nth-child(2) { --j: 1; }
.fr:nth-child(3), .fc > li:nth-child(3), .face--rec > li:nth-child(3) { --j: 2; }
.fr:nth-child(4), .face--rec > li:nth-child(4) { --j: 3; }
.motion :where(#what-it-does .face--ready .sq, #what-it-does .face--ready .tick, #what-it-does .face--rec .sq) { opacity: 0; scale: 0.6; }
.motion :where(#what-it-does .fr__next) { opacity: 0; }
.motion :where(#what-it-does .fx--in) { opacity: 0; translate: 0 var(--rise); }
.motion :where(#what-it-does .fx--in .fx__amt) { opacity: 0; translate: 0 calc(-1 * var(--rise-s)); }
.motion :where(#what-it-does .fc__stamp) { opacity: 0; scale: 1.2; }
.motion :where(#what-it-does .face--rec)::before { scale: 1 0; }
.motion #what-it-does .does__stage .face :is(.sq, .tick, .fr__next, .fx--in, .fx__amt, .fc__stamp) { transition: opacity 0s var(--t-base), scale 0s var(--t-base), translate 0s var(--t-base); }
.motion #what-it-does .does__stage .face--rec::before { transition: scale 0s var(--t-base); }
.motion #what-it-does :is(.cap__ob.is-in, .does__stage.is-in .pay[data-s="1"]) .face--ready .fr:not(.fr--todo) :is(.sq, .tick) {
  opacity: 1; scale: none; transition: opacity var(--t-base) var(--e-out), scale var(--t-base) var(--e-out); transition-delay: calc(220ms + var(--j) * var(--t-beat));
}
.motion #what-it-does :is(.cap__ob.is-in, .does__stage.is-in .pay[data-s="1"]) .face--ready .fr--todo .sq { opacity: 1; scale: none; transition: opacity var(--t-base) var(--e-out) 580ms, scale var(--t-base) var(--e-out) 580ms; }
.motion #what-it-does :is(.cap__ob.is-in, .does__stage.is-in .pay[data-s="1"]) .face--ready .fr__next { opacity: 1; transition: opacity var(--t-base) var(--e-out) 700ms; }
.motion #what-it-does :is(.cap__ob.is-in, .does__stage.is-in .pay[data-s="2"]) .fx--in { opacity: 1; translate: none; transition: opacity var(--t-base) var(--e-out) 180ms, translate var(--t-slow) var(--e-out) 180ms; }
.motion #what-it-does :is(.cap__ob.is-in, .does__stage.is-in .pay[data-s="2"]) .fx--in .fx__amt { opacity: 1; translate: none; transition: opacity var(--t-base) var(--e-out) 340ms, translate var(--t-slow) var(--e-out) 340ms; }
.motion #what-it-does :is(.cap__ob.is-in, .does__stage.is-in .pay[data-s="3"]) .fc__stamp { opacity: 1; scale: none; transition: opacity var(--t-fast) var(--e-out) 260ms, scale var(--t-base) var(--e-move) 260ms; }
.motion #what-it-does :is(.cap__ob.is-in, .does__stage.is-in .pay[data-s="4"]) .face--rec::before { scale: none; transition: scale var(--t-draw) var(--e-move) 180ms; }
.motion #what-it-does :is(.cap__ob.is-in, .does__stage.is-in .pay[data-s="4"]) .face--rec .sq { opacity: 1; scale: none; transition: opacity var(--t-base) var(--e-out), scale var(--t-base) var(--e-out); transition-delay: calc(220ms + var(--j) * 160ms); }
@media (prefers-reduced-motion: reduce) {
  .does__stage .pay__face, .does-plate > i::after, .pay__prog i::after, .stage-on .cap::before, .stage-on .cap__text > * { transition: none !important; }
}
#working-with-you {
  overflow-x: clip;                  
  --inv-x: 56px; --inv-y: 104px; --sq: 44px; --sq-t: 30px; --sqb-t: 20px; --m: 28px; --band-l: 16px; --band-h: 40px;
  --run-pl: 40px; --run-num: 48px; --run-box: 18px; --run-pr: 80px; --run-hd: 88px; --run-rh: 112px;
  --run-fs: 22px; --run-lh: 30px; --run-foot: 0px; --duty-over: 48px;
  --grey-25: rgb(93 100 112 / 0.25); --grey-20: rgb(93 100 112 / 0.20);
}
.work__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.work-h2__s { display: block; }
.work-lead { margin-top: 24px; }
.work-stack { position: relative; margin-top: var(--c-head-gap); padding-top: var(--inv-y); }
.work-past { position: absolute; top: var(--inv-y); left: var(--sheet-x, 0px); right: 0; height: 0; }
.work-inv {
  position: absolute; display: block; width: 80%; aspect-ratio: 14 / 9; font-style: normal;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 1px 2px rgb(10 12 17 / 0.08), 0 8px 18px -12px rgb(10 12 17 / 0.18);
}
.work-inv--back { left: calc(-1 * var(--inv-x)); top: calc(-1 * var(--inv-y)); }
.work-inv--mid { left: calc(-1 * var(--inv-x) / 2); top: calc(-1 * var(--inv-y) / 2); }
@supports (width: round(1.5px, 1px)) { .work-inv { width: round(80%, 1px); } }
.work-inv__lh { position: absolute; display: block; width: var(--sq); height: var(--sq); background: var(--ink); }
.work-inv--back .work-inv__lh { right: var(--m); top: var(--sqb-t); }
.work-inv--mid .work-inv__lh { left: var(--m); top: var(--sq-t); }
.work-inv__ref {
  position: absolute; left: calc(var(--m) + var(--sq) + 16px); top: var(--sq-t);
  font-family: var(--font-text); font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap;
}
.work-inv__band { position: absolute; display: block; left: calc(var(--m) + var(--band-l)); right: var(--m); top: calc(var(--sq-t) + var(--sq) + 20px); height: var(--band-h); background: var(--grey-20); }
.work-inv--back .work-inv__band { top: calc(var(--sqb-t) + var(--sq) + 20px); }
.work-inv__due { position: absolute; display: block; right: var(--m); bottom: var(--m); width: 34%; height: var(--band-h); background: var(--grey-25); }
.run { display: grid; padding-bottom: var(--run-foot); }
.run__h {
  position: relative; display: flex; align-items: center; height: var(--run-hd); margin: 0;
  padding: 0 var(--run-pr) 0 var(--run-pl);
  font-family: var(--font-text); font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; color: var(--ink);
}
.run__h::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform-origin: 0 50%; }
.run__list { padding: 0 var(--run-pr) 0 var(--run-pl); }
.run__row {
  display: grid; grid-template-columns: var(--run-num) minmax(0, 1fr) var(--run-box); column-gap: 12px; align-items: center;
  min-height: var(--run-rh); padding-block: 16px; border-bottom: var(--c-hair2) solid rgb(10 12 17 / 0.12);
}
.run__row:last-child { border-bottom: 0; }
.run__n { font-family: var(--font-text); font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: 0.02em; color: var(--grey); font-variant-numeric: tabular-nums; }
.run__t { font-weight: 500; font-size: var(--run-fs); line-height: var(--run-lh); color: var(--ink); text-wrap: pretty; }
.run__box { display: block; width: var(--run-box); height: var(--run-box); box-shadow: inset 0 0 0 var(--c-stroke) var(--ink); }
.run__note {
  margin: 0; padding: 20px var(--run-pr) 24px calc(var(--run-pl) + var(--run-num) + 12px);
  background: rgb(10 12 17 / 0.03); box-shadow: inset 0 1px 0 rgb(10 12 17 / 0.10);
  font-size: var(--c-body); line-height: var(--c-body-lh); color: var(--grey); text-wrap: pretty;
}
.run__flag {
  position: absolute; display: block; width: 14px; height: 40px; background: var(--accent);
  left: calc(var(--sheet-x, 0px) - 14px); top: calc(var(--inv-y) + var(--run-hd) + var(--run-rh) / 2 - 20px);
  box-shadow: 0 1px 1px rgb(10 12 17 / 0.14);
}
.work-duty { position: relative; padding: 32px 36px 36px; }
.work-duty__h { font-family: var(--font-text); font-weight: 600; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; color: var(--paper); }
.work-duty__list { margin-top: 12px; }
.work-duty__list > li {
  display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 16px; align-items: baseline;
  padding-block: 12px; border-bottom: 1px solid rgb(255 255 255 / 0.10);
  font-size: 17px; line-height: 26px; color: var(--c-soft-ink); text-wrap: pretty;
}
.work-duty__list > li:last-child { border-bottom: 0; }
.work-duty__list > li::before { content: ""; width: 6px; height: 6px; background: var(--paper); translate: 0 -3px; }
.work-duty__key {
  display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 14px; align-items: baseline;
  margin-top: 8px; padding-top: 20px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
  font-size: 17px; line-height: 26px; font-weight: 600; color: var(--accent); text-wrap: pretty;
}
.work-duty__key::before { content: ""; width: 10px; height: 10px; background: var(--accent); translate: 0 -1px; }
@media (width >= 900px) {
  #working-with-you { --sheet-x: var(--inv-x); }
  .work__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); align-items: start; }
  .work-head { grid-column: 8 / -1; grid-row: 1; }
  .work-stack { grid-column: 1 / span 7; grid-row: 1 / span 2; margin-top: 0; padding-left: var(--inv-x); }
  .work-duty { --duty-ml: calc(-1 * (var(--c-gap) + var(--duty-over))); grid-column: 8 / -1; grid-row: 2; margin-top: 48px; margin-left: var(--duty-ml); }
}
@media (900px <= width < 1200px) {
  #working-with-you {
    --inv-x: 40px; --inv-y: 80px; --sq: 40px; --sq-t: 20px; --sqb-t: 12px; --m: 20px; --band-l: 12px;
    --run-pl: 32px; --run-pr: 72px; --run-hd: 80px; --run-rh: 96px; --run-fs: 20px; --run-lh: 28px; --duty-over: 40px;
  }
  .work-duty { padding: 28px; }
}
@media (600px <= width < 900px) {
  #working-with-you {
    --inv-x: 32px; --inv-y: 72px; --sq: 40px; --sq-t: 16px; --sqb-t: 12px; --m: 16px; --band-l: 8px; --band-h: 32px;
    --run-pl: 32px; --run-pr: 32px; --run-hd: 80px; --run-rh: 96px; --run-fs: 20px; --run-lh: 28px; --run-foot: 40px;
  }
  .work-duty { --duty-ml: 32px; margin: -40px 0 0 32px; }
}
@media (width < 600px) {
  #working-with-you {
    --inv-x: 24px; --inv-y: 72px; --sq: 40px; --sq-t: 16px; --sqb-t: 12px; --m: 16px; --band-l: 8px; --band-h: 32px;
    --run-pl: 16px; --run-num: 36px; --run-box: 16px; --run-pr: 16px; --run-hd: 64px; --run-rh: 80px;
    --run-fs: 17px; --run-lh: 26px; --run-foot: 28px;
  }
  .work-lead { margin-top: 16px; }
  .run__h { font-size: 18px; line-height: 25px; }
  .run__row { padding-block: 14px; }
  .run__note { padding: 16px var(--run-pr) 20px calc(var(--run-pl) + var(--run-num) + 12px); font-size: 16px; line-height: 26px; }
  .run__note { position: relative; }
  .run__note::before { content: ""; position: absolute; left: var(--run-pl); top: 24px; width: 10px; height: 10px; background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, var(--accent)); }
  .work-duty { --duty-ml: 16px; margin: -28px 0 0 16px; padding: 24px 20px 28px; }
  .work-duty__h { font-size: 20px; line-height: 26px; }
  .work-duty__list > li, .work-duty__key { font-size: 16px; line-height: 24px; }
}
#where-it-goes { overflow-x: clip; }
.where__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.where-h2__s { display: block; }
.where-log {
  --g: 56px; --gg: 16px; --pt: 28px; --px: 32px; --pb: 32px; --h3: 24px; --h3lh: 30px; --mk: 16px;
  --sq: 288px; --in: 160px; --fr: 56px; --edge-ink: rgb(255 255 255 / 0.12);
  --mky: calc(var(--pt) + var(--h3lh) / 2);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px;
}
.where-item { position: relative; grid-column: 1; display: grid; grid-template-columns: var(--g) minmax(0, 1fr); column-gap: var(--gg); }
.where-item--now { grid-row: 1; } .where-item--next { grid-row: 2; } .where-item--later { grid-row: 3; }
.where-note { grid-column: 2; position: relative; isolation: isolate; }
.where-item--later .where-note { min-height: calc(var(--pt) + var(--sq) - var(--c-fold-y) + 48px); }
.where-log::before, .where-log::after { content: ""; grid-column: 1; justify-self: start; pointer-events: none; transform-origin: 50% 0; }
.where-log::before { grid-row: 1; width: 2px; margin: var(--mky) 0 0 calc(var(--g) / 2 - 1px); background: var(--accent); }
.where-log::after {
  grid-row: 2; width: 1px; margin: -24px 0 calc(-1 * (24px + var(--mky))) calc(var(--g) / 2 - 1px);
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.22) 0 6px, transparent 6px 12px);
}
.where-mk {
  position: absolute; z-index: 1; display: block; width: var(--mk); height: var(--mk);
  left: calc(var(--g) / 2 - var(--mk) / 2); top: calc(var(--mky) - var(--mk) / 2);
  background: var(--ink); box-shadow: inset 0 0 0 2px var(--paper);
}
.where-mk--now { background: var(--accent); box-shadow: none; }
.where-mk--next { background: linear-gradient(to right, var(--paper) 0 50%, var(--ink) 50%); }
.rel { padding: var(--pt) var(--px) var(--pb); }
#where-it-goes .rel--next { --gl-depth: var(--d-ink-card); }     
#where-it-goes .rel--later { --gl-tint: rgb(14 17 24 / 0.44); --gl-depth: var(--d-ink-card); }
.rel__h { font-family: var(--font-text); font-weight: 600; font-size: var(--h3); line-height: var(--h3lh); letter-spacing: -0.01em; color: var(--paper); }
.rel__note { margin-top: 12px; max-width: 36em; font-size: var(--c-body); line-height: var(--c-body-lh); color: var(--c-soft-ink); text-wrap: pretty; }
.rel__items { display: grid; margin-top: 12px; }
.rel__items > li {
  display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 16px; align-items: baseline;
  padding-block: 12px; border-bottom: 1px solid rgb(255 255 255 / 0.10);
  font-size: 17px; line-height: 26px; color: var(--c-soft-ink); text-wrap: pretty;
}
.rel__items > li::before { content: ""; width: 6px; height: 6px; background: var(--c-soft-ink); translate: 0 -3px; }
.rel--now .rel__items > li { color: var(--paper); }
.rel__items > li:last-child { border-bottom: 0; }
.rel__key {
  display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 14px; align-items: baseline;
  margin-top: 4px; padding-top: 16px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
  font-size: 17px; line-height: 26px; font-weight: 600; color: var(--accent); text-wrap: pretty;
}
.rel__key::before { content: ""; width: 10px; height: 10px; background: var(--accent); translate: 0 -1px; }
.where-sq {
  position: absolute; z-index: -1; display: block; top: var(--pt); left: calc(100% - var(--in));
  width: var(--sq); height: var(--sq);
  box-shadow: inset 0 0 0 1px var(--edge-ink), inset 0 0 0 var(--fr) var(--c-ink-3);
}
.where-sq--now { background: var(--c-ink-3); box-shadow: inset 0 0 0 1px var(--edge-ink); }
.where-sq--next { background: linear-gradient(to right, var(--c-ink-3) 0 50%, transparent 50%); }
.where-sq--next::after, .where-sq--later::after { content: ""; position: absolute; inset: var(--fr); box-shadow: inset 0 0 0 1px var(--edge-ink); }
.where-sq--next::after { left: 50%; }
@media (width >= 600px) {
  .rel--now .rel__items, .rel--next .rel__items { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; column-gap: 32px; }
  .rel--now .rel__items { grid-template-rows: repeat(3, auto); }
  .rel--next .rel__items { grid-template-rows: repeat(2, auto); }
  .rel--now .rel__items > li:nth-child(3), .rel--next .rel__items > li:nth-child(2) { border-bottom: 0; }
  .where-item--later .where-note { width: 60%; }
  @supports (width: round(1.5px, 1px)) { .where-item--later .where-note { width: round(60%, 1px); } }
}
@media (width >= 1200px) {
  .where__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); align-items: start; }
  .where-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--topbar-h) + 48px); }
  .where-log { grid-column: 5 / -1; }
}
@media (width < 1200px) {
  .where-log { margin-top: var(--c-head-gap); }
}
@media (900px <= width < 1200px) {
  .where-log { --sq: 240px; --in: 136px; }
}
@media (600px <= width < 900px) {
  .where-log { --sq: 200px; --in: 112px; --fr: 48px; --px: 28px; }
}
@media (width < 600px) {
  .where-log { --g: 40px; --gg: 0px; --pt: 20px; --px: 20px; --pb: 24px; --h3: 20px; --h3lh: 26px; --mk: 12px;
               --sq: 112px; --in: calc(var(--sq) + var(--px)); --fr: 28px; row-gap: 16px; }
  .where-log::after { margin-top: -16px; margin-bottom: calc(-1 * (16px + var(--mky))); }
  .rel__note { margin-top: 8px; }
  .rel__items { margin-top: 8px; }
  .rel__items > li, .rel__key { font-size: 16px; line-height: 24px; }
}
@supports (width: round(1.5px, 1px)) {
  #working-with-you .run, #where-it-goes .rel { width: round(100%, 1px); }
  #working-with-you .work-duty { width: round(calc(100% - var(--duty-ml, 0px)), 1px); }
}
.motion :where(#working-with-you .work-inv) { opacity: 0; translate: 8px 8px; }
.motion :where(#working-with-you .run) { opacity: 0; translate: 0 var(--rise); }
.motion :where(#working-with-you .run__h)::after { scale: 0 1; }
.motion :where(#working-with-you .run__row) { opacity: 0; translate: 0 var(--rise-s); }
.motion :where(#working-with-you .run__flag) { opacity: 0; translate: -8px 0; }
.motion :where(#working-with-you .run__note) { opacity: 0; }
.motion .work-stack.is-in :is(.work-inv, .run, .run__row, .run__flag, .run__note) {
  opacity: 1; translate: none;
  transition: opacity var(--t-base) var(--e-out) var(--d, 0ms), translate var(--t-slow) var(--e-out) var(--d, 0ms);
}
.motion .work-stack.is-in .run__h::after { scale: none; transition: scale var(--t-draw) var(--e-move) 240ms; }
.work-inv--mid { --d: 60ms; }
.run { --d: 120ms; }
.run__row:nth-child(1) { --d: 300ms; } .run__row:nth-child(2) { --d: 360ms; } .run__row:nth-child(3) { --d: 420ms; }
.run__flag { --d: 540ms; }
.run__note { --d: 600ms; }
.motion .work-stack.is-in .run__flag { transition-duration: var(--t-base); }
@media (width < 900px) { .motion :where(#working-with-you .work-duty) { translate: 0 var(--rise); } }
.motion :where(#working-with-you .work-duty__key) { opacity: 0; }
.motion .work-duty.is-in .work-duty__key { opacity: 1; transition: opacity var(--t-base) var(--e-out) 420ms; }
.motion :where(#where-it-goes .where-sq, #where-it-goes .where-mk) { opacity: 0; }
.motion #where-it-goes .rel.is-in ~ .where-sq { opacity: 1; transition: opacity var(--t-slow) var(--e-out); }
.motion #where-it-goes .where-item:has(.rel.is-in) .where-mk { opacity: 1; transition: opacity var(--t-base) var(--e-out) 160ms; }
.motion :where(#where-it-goes .where-log)::before, .motion :where(#where-it-goes .where-log)::after { scale: 1 0; }
.motion #where-it-goes .where-log:has(.rel--now.is-in)::before { scale: none; transition: scale var(--t-draw) var(--e-move) 240ms; }
.motion #where-it-goes .where-log:has(.rel--next.is-in)::after { scale: none; transition: scale var(--t-draw) var(--e-move) 240ms; }
#connected {
  --conn-w: min(100%, 560px);    
  --conn-pad: 32px;              
  --conn-gap: 24px;              
  --conn-sq: 10px;
  --conn-row: 48px;
  --conn-band: 40px;             
  --conn-d: 12px;                
  --conn-rh: 76px;               
  --conn-rg: 14px;               
  --conn-rr: 20px;               
  --conn-track: #313746;         
  isolation: isolate;
  padding-bottom: 0;             
}
@supports (width: round(1.5px, 1px)) {
  #connected { --conn-w: calc(round(down, (min(100%, 560px) - 3 * var(--conn-rg)) / 4, 1px) * 4 + 3 * var(--conn-rg)); }
}
.conn__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--c-head-gap); }
#connected .conn__h2 { max-width: 13.6em; }
.conn-band {
  position: absolute; grid-column: 1; grid-row: 1 / 3; top: calc(-1 * var(--c-fold-y)); bottom: 0;
  left: calc(var(--conn-pad) + var(--conn-sq) / 2 - var(--conn-band) / 2); width: var(--conn-band);
  background: rgb(93 100 112 / 0.30); pointer-events: none;
}
.conn-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.conn-layer { position: relative; width: var(--conn-w); margin-top: var(--conn-d); }
.conn-layer::before, .conn-layer::after { content: ""; position: absolute; pointer-events: none; }
.conn-layer::before {   
  left: 0; right: calc(-1 * var(--conn-d)); top: calc(-1 * var(--conn-d)); height: var(--conn-d);
  background: linear-gradient(rgb(10 12 17 / 0.10) 0 1px, transparent 1px), rgb(255 255 255 / 0.92);
  clip-path: polygon(var(--conn-d) 0, 100% 0, calc(100% - var(--conn-d)) 100%, 0 100%);
}
.conn-layer::after {    
  top: calc(-1 * var(--conn-d)); right: calc(-1 * var(--conn-d)); bottom: 0; width: var(--conn-d);
  background: rgb(228 231 236 / 0.90);
  clip-path: polygon(0 var(--conn-d), 100% 0, 100% calc(100% - var(--conn-d)), 0 100%);
}
.conn-layer__pane { padding: var(--conn-pad); }
.conn-head {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px;
  padding-bottom: 20px; border-bottom: 1px solid rgb(10 12 17 / 0.12);
}
.conn-k {
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 12px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey);
}
.conn-t { font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; color: var(--ink); }
.conn-list { position: relative; display: grid; padding-top: 4px; }
.conn-list > li {
  display: grid; grid-template-columns: var(--conn-sq) minmax(0, 1fr); column-gap: var(--conn-gap); align-items: center;
  min-height: var(--conn-row); font-size: 17px; line-height: 24px; font-weight: 500; color: var(--ink);
}
.conn-list::before {
  content: ""; position: absolute; left: calc(var(--conn-sq) / 2 - 1px); width: 2px;
  top: calc(4px + var(--conn-row) / 2); bottom: calc(var(--conn-row) / 2); background: var(--ink);
  transform-origin: 50% 0;
}
.conn-sq { position: relative; z-index: 1; width: var(--conn-sq); height: var(--conn-sq); background: var(--paper); box-shadow: inset 0 0 0 var(--c-stroke) var(--ink); }
.conn-sq::after { content: ""; position: absolute; inset: 0; background: var(--ink); }
.conn-sq--acc { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, var(--accent)); }
.conn-sq--acc::after { background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, var(--accent)); }
.conn-ground { position: relative; isolation: isolate; display: grid; row-gap: 24px; align-content: start; padding-bottom: var(--c-fold-y); }
.conn-ground::before, .conn-ground::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * max(var(--gutter), env(safe-area-inset-left))); right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
}
.conn-ground::before { top: 0; bottom: 0; background: var(--ink); }
.conn-ground::after { top: calc(var(--conn-rh) / 2 - 12px); height: 24px; background: var(--conn-track); }
.conn-rails { position: relative; width: var(--conn-w); height: var(--conn-rh); }
.conn-rails__under, .conn-rails__glass {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--conn-rg);
}
.conn-rails__under > i { position: relative; display: block; box-shadow: var(--d-ink-card); }
.conn-rails__under > i::after {   
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--conn-d); background: var(--c-ink-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--conn-d)), 0 100%);
}
.conn-rails__under > i:last-child::after {   
  top: calc(-1 * var(--conn-d));
  clip-path: polygon(0 var(--conn-d), 100% 0, 100% calc(100% - var(--conn-d)), 0 100%);
}
.conn-rails__glass {
  --gl-tint: rgb(14 17 24 / 0.48); --gl-blur: 20px; --gl-depth: var(--g-none);   
  --cm: calc((100% - 3 * var(--conn-rg)) / 4);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / var(--cm) 100% no-repeat, linear-gradient(#000 0 0) calc(100% / 3) 0 / var(--cm) 100% no-repeat,
    linear-gradient(#000 0 0) calc(200% / 3) 0 / var(--cm) 100% no-repeat, linear-gradient(#000 0 0) 100% 0 / var(--cm) 100% no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0 / var(--cm) 100% no-repeat, linear-gradient(#000 0 0) calc(100% / 3) 0 / var(--cm) 100% no-repeat,
    linear-gradient(#000 0 0) calc(200% / 3) 0 / var(--cm) 100% no-repeat, linear-gradient(#000 0 0) 100% 0 / var(--cm) 100% no-repeat;
}
.conn-rails__glass::before { content: none; }
.conn-rails__glass > li {
  position: relative; display: grid; place-items: center; padding: 8px; text-align: center;
  font-size: 15px; line-height: 20px; font-weight: 600; color: var(--paper);
}
.conn-rails__glass > li::before {   
  content: ""; position: absolute; inset: 0; pointer-events: none; padding: var(--edge); background: var(--g-rim-ink);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.conn-glabel { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; }
.conn-glabel .conn-k { color: var(--c-soft-ink); }
.conn-glabel .conn-t { color: var(--paper); }
.conn-glabel, .conn-rails__glass { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (width >= 900px) {
  .conn__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); row-gap: 0; }
  .conn__h2 { grid-column: 1 / span 7; grid-row: 1; align-self: start; }
  .conn-col, .conn-band { grid-column: 8 / -1; grid-row: 1; }
  .conn-ground { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); }
  .conn-rails { grid-column: 8 / -1; grid-row: 1; }
  .conn-glabel { grid-column: 1 / span 7; grid-row: 1; align-self: center; }
}
@media (900px <= width < 1200px) {
  #connected { --conn-pad: 28px; }
  .conn__h2 { grid-column: 1 / span 6; }
  .conn-col, .conn-band, .conn-rails { grid-column: 7 / -1; }
  .conn-glabel { grid-column: 1 / span 6; }
  .conn-t { font-size: 22px; line-height: 28px; }
}
@media (width < 900px) {
  .conn__grid { row-gap: 0; }
  .conn-col { grid-row: 2; margin-top: var(--c-head-gap); }
  .conn-ground { grid-row: 3; }
  #connected .conn__h2 { grid-row: 1; max-width: none; padding-left: calc(var(--conn-pad) + var(--conn-sq) + var(--conn-gap)); }
}
@media (width < 600px) {
  #connected { --conn-pad: 20px; --conn-gap: 20px; --conn-row: 44px; --conn-band: 32px; --conn-d: 8px; --conn-rh: 60px; --conn-rg: 14px; }
  .conn-head { display: grid; row-gap: 2px; padding-bottom: 16px; }   
  .conn-t { font-size: 20px; line-height: 26px; }
  .conn-list > li { font-size: 16px; line-height: 22px; }
  .conn-glabel { display: grid; row-gap: 2px; }
  .conn-rails__glass { --gl-blur: var(--g-blur-card); }
  .conn-rails__glass > li { padding: 6px 4px; font-size: 13px; line-height: 16px; }
}
@media (width < 430px) {
  #connected { --conn-rh: 56px; }
  #connected { --conn-w: min(100%, 560px); }
  @supports (width: round(1.5px, 1px)) {
    #connected { --conn-w: calc(round(down, (100% - var(--conn-rg)) / 2, 1px) * 2 + var(--conn-rg)); }
  }
  .conn-rails { height: calc(2 * var(--conn-rh) + var(--conn-rr)); }
  .conn-rails__under, .conn-rails__glass {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--conn-rh)); row-gap: var(--conn-rr);
  }
  .conn-rails__glass {
    --cm: calc((100% - var(--conn-rg)) / 2) calc((100% - var(--conn-rr)) / 2);
    -webkit-mask:
      linear-gradient(#000 0 0) 0 0 / var(--cm) no-repeat, linear-gradient(#000 0 0) 100% 0 / var(--cm) no-repeat,
      linear-gradient(#000 0 0) 0 100% / var(--cm) no-repeat, linear-gradient(#000 0 0) 100% 100% / var(--cm) no-repeat;
    mask:
      linear-gradient(#000 0 0) 0 0 / var(--cm) no-repeat, linear-gradient(#000 0 0) 100% 0 / var(--cm) no-repeat,
      linear-gradient(#000 0 0) 0 100% / var(--cm) no-repeat, linear-gradient(#000 0 0) 100% 100% / var(--cm) no-repeat;
  }
  .conn-rails__glass > li { font-size: 15px; line-height: 20px; }
  .conn-rails__under > i:nth-child(2)::after { top: calc(-1 * var(--conn-d)); clip-path: polygon(0 var(--conn-d), 100% 0, 100% calc(100% - var(--conn-d)), 0 100%); }
  .conn-rails__under > i:nth-child(n + 3)::after { top: calc(-1 * var(--conn-d)); clip-path: polygon(0 var(--conn-d), 100% 0, 100% calc(100% - var(--conn-d)), 0 100%); }
  .conn-ground::after {
    height: calc(2 * var(--conn-rh) + var(--conn-rr));
    top: 0;
    background: linear-gradient(transparent calc(var(--conn-rh) / 2 - 12px), var(--conn-track) 0 calc(var(--conn-rh) / 2 + 12px),
      transparent 0 calc(var(--conn-rh) * 1.5 + var(--conn-rr) - 12px), var(--conn-track) 0 calc(var(--conn-rh) * 1.5 + var(--conn-rr) + 12px), transparent 0);
  }
}
.motion :where(#connected .conn-rails) { translate: 0 var(--rise); }
.motion :where(#connected .conn-rails__glass, #connected .conn-rails__under, #connected .conn-glabel) { opacity: 0; }
.motion #connected .conn-ground.is-in .conn-rails { translate: none; transition: translate var(--t-slow) var(--e-out); }
.motion #connected .conn-ground.is-in :is(.conn-rails__glass, .conn-rails__under) { opacity: 1; transition: opacity var(--t-base) var(--e-out); }
.motion #connected .conn-ground.is-in .conn-glabel { opacity: 1; transition: opacity var(--t-base) var(--e-out) var(--t-beat); }
.motion :where(#connected .conn-layer) { translate: 0 calc(-1 * var(--rise-s)); }
.motion :where(#connected .conn-layer__pane), .motion :where(#connected .conn-layer)::before, .motion :where(#connected .conn-layer)::after { opacity: 0; }
.motion #connected .conn-col.is-in .conn-layer { translate: none; transition: translate var(--t-slow) var(--e-out) 180ms; }
.motion #connected .conn-col.is-in .conn-layer__pane, .motion #connected .conn-col.is-in .conn-layer::before, .motion #connected .conn-col.is-in .conn-layer::after {
  opacity: 1; transition: opacity var(--t-base) var(--e-out) 180ms;
}
.motion :where(#connected .conn-list)::before { scale: 1 0; }
.motion #connected .conn-col.is-in .conn-list::before { scale: none; transition: scale var(--t-draw) var(--e-move) 360ms; }
.motion :where(#connected .conn-sq)::after { opacity: 0; scale: 0.6; }
.motion #connected .conn-col.is-in .conn-sq::after { opacity: 1; scale: none; transition: opacity var(--t-base) var(--e-out), scale var(--t-base) var(--e-out); transition-delay: var(--conn-at, 360ms); }
#connected .conn-list > li:nth-child(2) { --conn-at: 680ms; }
#connected .conn-list > li:nth-child(3) { --conn-at: 760ms; }
#connected .conn-list > li:nth-child(4) { --conn-at: 840ms; }
#connected .conn-list > li:nth-child(5) { --conn-at: 1040ms; }
#talk {
  --close-m: 32px;               
  --close-inv: 480px;            
  --close-tuck: 20px;            
  --close-slip: 400px;
  --close-out: 32px;             
  --close-total: 56px; --close-total-lh: 56px;
}
.close__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
#talk .close__h2 { max-width: 14em; }
.close__h2 .stop::before { background: var(--ink); }   
#talk .close__lead { margin-top: 24px; max-width: 30rem; color: var(--ink); }
#talk .close__body { margin-top: 16px; max-width: 30rem; color: var(--ink); }
.close__act { margin-top: 36px; }
#talk .btn { height: 56px; padding-inline: 32px; background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 600; }
@media (hover: hover) { #talk .btn:hover { background: var(--paper); color: var(--ink); } }
#talk .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#talk .btn::after { content: ""; width: 9px; height: 9px; margin-left: 16px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; transition: translate var(--t-fast) var(--e-out); }
@media (hover: hover) { #talk .btn:hover::after { translate: 3px 0; } }
.close-fig { display: grid; grid-template-columns: calc(var(--close-inv) + 2 * var(--close-m)); justify-content: start; align-content: start; }
.close-block, .close-inv { grid-area: 1 / 1; }
.close-block {
  --gl-blur: 20px;   
  --gl-bevel: inset 0 1px 0 rgb(255 255 255 / 0.60), inset 0 -2px 0 rgb(10 12 17 / 0.10);
  background-image: linear-gradient(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.55)), var(--grain-ink);
  background-size: calc(100% - 2 * var(--close-m) + 2px) calc(100% - 2 * var(--close-m) + 2px), 128px 128px;
  background-position: calc(var(--close-m) - 1px) calc(var(--close-m) - 1px), 0 0;
  background-repeat: no-repeat, repeat;
}
.close-inv {
  position: relative; z-index: 1; margin: var(--close-m); display: grid; color: var(--ink);
  --gl-depth: 0 1px 2px rgb(10 12 17 / 0.10);
}
.close-inv__head { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 24px 24px 0; }
.close-inv__logo { display: block; width: 24px; height: 24px; margin-top: 2px; background: var(--ink); }
.close-inv__ref { display: grid; min-width: 0; }
.close-inv__id { font-size: 22px; line-height: 28px; }
.close-inv__due { font-size: 13px; line-height: 18px; color: var(--grey); white-space: nowrap; }
.close-inv__rules { display: grid; margin: 12px 24px 0; }
.close-inv__rules > i { display: block; height: 28px; border-bottom: 1px solid var(--hairline); }
.close-inv__total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; column-gap: 16px; row-gap: 12px;
  margin: 24px 24px 0; padding: 12px 0 24px; border-top: 2px solid var(--ink);
}
.close-inv__sum { display: grid; }
.close-inv__k { font-size: 13px; line-height: 18px; font-weight: 600; }
.close-inv__amt { font-size: var(--close-total); line-height: var(--close-total-lh); }
.close-paid {
  display: inline-flex; align-items: center; column-gap: 8px; margin-bottom: 6px; padding: 6px 12px;
  box-shadow: inset 0 0 0 2px var(--ink);
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.09em; text-transform: uppercase;
}
.close-paid::before { content: ""; width: 10px; height: 10px; background: var(--ink); }
.close-slip {
  grid-area: 2 / 1; justify-self: start; width: var(--close-slip); margin: calc(-1 * var(--close-tuck)) 0 0 calc(-1 * var(--close-out));
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 16px; row-gap: 4px;
  padding: calc(var(--close-tuck) + 8px) 24px 20px;
  --gl-depth: var(--d-apricot);
}
.close-slip__k { display: inline-flex; align-items: center; column-gap: 8px; white-space: nowrap; font-size: 15px; line-height: 20px; font-weight: 600; }
.close-slip__sq { display: block; width: 10px; height: 10px; background: var(--paper); }
.close-slip__amt { font-size: 28px; line-height: 32px; }   
@media (width >= 900px), (700px <= width < 900px) and (height <= 500px) {
  .close__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); align-items: start; }
  .close-text { grid-column: 1 / span 6; }
  .close-fig { grid-column: 7 / -1; justify-content: center; }
}
@media (900px <= width < 1200px), (700px <= width < 900px) and (height <= 500px) {
  #talk { --close-m: 24px; --close-inv: calc(100% - 48px); --close-slip: 340px; --close-out: 16px; --close-total: 44px; --close-total-lh: 48px; }
  .close-text { grid-column: 1 / span 7; }
  .close-fig { grid-column: 8 / -1; grid-template-columns: minmax(0, 1fr); }
  .close-slip { flex-direction: column; align-items: flex-start; }   
}
@media (700px <= width < 900px) and (height <= 500px) {
  .close-text { grid-column: 1 / span 6; }
  .close-fig { grid-column: 7 / -1; }
  #talk { --close-slip: calc(100% - 8px); --close-out: 8px; }
}
@media (600px <= width < 900px) and (height > 500px), (600px <= width < 700px) {
  #talk { --close-m: 24px; --close-inv: min(472px, calc(100% - 48px)); --close-out: -48px; --close-total: 40px; --close-total-lh: 44px; }
}
@media (width < 600px) {
  #talk { --close-m: 12px; --close-inv: calc(100% - 24px); --close-tuck: 16px; --close-out: -24px; --close-slip: calc(100% - 24px); --close-total: 40px; --close-total-lh: 44px; }
  .close-fig { grid-template-columns: minmax(0, 1fr); }
  .close__act .btn { width: 100%; }
  .close-inv__head { padding: 16px 16px 0; }
  .close-inv__rules { margin-inline: 16px; }
  .close-inv__total { margin-inline: 16px; padding-bottom: 16px; margin-top: 20px; }
  .close-slip { flex-direction: column; align-items: flex-start; padding: calc(var(--close-tuck) + 8px) 16px 16px; }
  .close-slip__k { font-size: 14px; }
}
@media (width < 360px) {
  #talk { --close-total: 32px; --close-total-lh: 36px; }
}
.motion :where(#talk .close-text > *) { opacity: 0; translate: 0 var(--rise); }
.motion #talk .close-text.is-in > * { opacity: 1; translate: none; transition: opacity var(--t-base) var(--e-out), translate var(--t-slow) var(--e-out); }
.motion #talk .close-text.is-in > :nth-child(2) { transition-delay: 60ms; }
.motion #talk .close-text.is-in > :nth-child(n + 3) { transition-delay: 120ms; }
.motion :where(#talk .close-block, #talk .close-inv) { opacity: 0; translate: 0 var(--rise); }
.motion #talk .close-fig.is-in :is(.close-block, .close-inv) { opacity: 1; translate: none; transition: opacity var(--t-base) var(--e-out), translate var(--t-slow) var(--e-out); }
.motion :where(#talk .close-paid) { opacity: 0; scale: 1.2; }
.motion #talk .close-fig.is-in .close-paid { opacity: 1; scale: none; transition: opacity var(--t-fast) var(--e-move) 360ms, scale var(--t-base) var(--e-move) 360ms; }
.motion :where(#talk .close-slip) { opacity: 0; translate: calc(-1 * var(--rise-l)) 0; }
.motion #talk .close-fig.is-in .close-slip { opacity: 1; translate: none; transition: opacity var(--t-base) var(--e-out) 560ms, translate var(--t-slow) var(--e-out) 560ms; }
.ft { margin-top: auto; background: var(--ink); color: var(--paper); overflow: hidden; }
.ft > .wrap { padding-block: 112px 40px; }
.ft__main { display: grid; row-gap: 48px; }
.ft__mark { display: block; width: 100%; height: auto; }
.ft__side-r { fill: #1A1E27; }
.ft__side-b { fill: var(--c-ink-3); }
.ft__side path { stroke: rgb(255 255 255 / 0.06); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.ft__face { fill: var(--paper); stroke: rgb(10 12 17 / 0.06); stroke-width: 2px; vector-effect: non-scaling-stroke; paint-order: fill; shape-rendering: crispEdges; }
.ft__stop { fill: var(--accent); shape-rendering: crispEdges; }
.ft__side-col { --ft-lh: 52px; }
.ft__line {
  font-family: var(--font-display); font-weight: 600; font-stretch: 90%; word-spacing: var(--ws-display);
  font-size: 48px; line-height: var(--ft-lh); letter-spacing: -0.02em; max-width: 9.5em; text-wrap: balance;
}
.ft__nav { margin-top: 32px; display: grid; grid-template-columns: auto 1fr; column-gap: 32px; align-items: center; padding-top: 12px; border-top: 1px solid var(--c-rule-ink); }
.ft__h { font-family: var(--font-text); font-stretch: 100%; font-size: var(--c-label); line-height: var(--c-label-lh); letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; color: var(--c-soft-ink); }
.ft__nav ul { display: flex; flex-wrap: wrap; gap: 0 32px; }
.ft__nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; line-height: 24px; font-weight: 500; text-decoration: none; }
.ft__nav a::after {   
  content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: var(--accent);
  scale: 0 1; transform-origin: 0 50%; transition: scale var(--t-fast) var(--e-out);
}
@media (hover: hover) { .ft__nav a:hover::after { scale: none; } }
.ft .stop::before { background: var(--paper); }   
.ft__record { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 24px; row-gap: 16px; margin-top: 88px; padding-top: 24px; border-top: 1px solid var(--c-rule-ink); font-size: 14px; line-height: 21px; color: var(--c-soft-ink); }
.ft__logo { display: inline-flex; align-items: center; justify-content: center; justify-self: start; width: 44px; height: 44px; margin: -12px 0 0 -8px; }
.ft__logo svg { width: 28px; height: 20px; }
.ft__logo:focus-visible { outline-offset: 0; }
.ft .mark__ink { fill: var(--paper); }
.ft__legal { display: grid; row-gap: 4px; }
.ft__legal p { max-width: 35em; }
.ft__legal a { position: relative; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ft__legal a::after { content: ""; position: absolute; inset: -12px -4px; }
.ft__legal a:focus-visible { outline-offset: 2px; }
.ft__legal a:hover { color: var(--paper); }
.ft__end { white-space: nowrap; }
.ft :focus-visible { outline-color: var(--accent); }
@media (width >= 900px) {
  .ft__main { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--c-gap); align-items: start; }
  .ft__art { grid-column: 1 / span 6; }
  .ft__mark { max-width: 560px; }
  .ft__side-col { grid-column: 7 / -1; padding-top: max(0px, calc(min(560px, 100%) * 0.3376 - var(--ft-lh) / 2)); }
}
@media (900px <= width < 1200px) { .ft__side-col { --ft-lh: 44px; } .ft__line { font-size: 40px; } }
@media (width < 900px) {
  .ft > .wrap { padding-block: 80px 32px; }
  .ft__art { max-width: 360px; }
  .ft__side-col { --ft-lh: 40px; }
  .ft__line { font-size: 36px; }
}
@media (width < 600px) {
  .ft > .wrap { padding-block: 64px 28px; }
  .ft__art { max-width: 240px; }
  .ft__side-col { --ft-lh: 34px; }
  .ft__line { font-size: 30px; }
  .ft__nav { grid-template-columns: minmax(0, 1fr); row-gap: 4px; margin-top: 32px; }
  .ft__record { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
  .ft__end { white-space: normal; }
}
@media (width < 360px) { .ft__side-col { --ft-lh: 30px; } .ft__line { font-size: 26px; } }
@media (orientation: landscape) and (max-height: 500px) and (width < 900px) {
  .ft__main { grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; align-items: center; }
  .ft__art { max-width: none; }
  .ft__mark { height: min(40vh, 160px); width: auto; }
  .ft__side-col { --ft-lh: 34px; }
  .ft__line { font-size: 30px; }
  .ft__record { margin-top: 48px; }
}
.motion :where(.ft__main .ft__face, .ft__main .ft__stop) { translate: 24px 24px; }
.motion .ft__main.is-in :is(.ft__face, .ft__stop) { translate: none; transition: translate var(--t-draw) var(--e-move); }
.motion :where(.ft__main .ft__side-col) { opacity: 0; translate: 0 var(--rise-s); }
.motion .ft__main.is-in .ft__side-col { opacity: 1; translate: none; transition: opacity var(--t-base) var(--e-out) var(--t-stagger), translate var(--t-slow) var(--e-out) var(--t-stagger); }
@media (prefers-reduced-motion: reduce) { .ft__nav a::after { transition: none; } #talk .btn::after { transition: none; } }
.sx-label { font-family: var(--font-text); font-stretch: 100%; letter-spacing: 0.08em; }
.sx-label::before, .tag::before, .sx-label--bare::before {
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
}
.ob .amt { font-family: var(--font-text); font-stretch: 100%; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.t-display, .t-h1, .t-h2, .t-close, .t-key, .t-inv, .t-promise {
  font-family: var(--font-display); font-weight: 600; font-stretch: 90%; letter-spacing: -0.02em;
  word-spacing: var(--ws-display); text-wrap: balance;
}
.t-h1 { font-size: var(--ty-h1); line-height: var(--ty-h1-lh); letter-spacing: var(--ty-h1-ls); }
.t-h2 { font-size: var(--ty-h2); line-height: var(--ty-h2-lh); letter-spacing: var(--ty-h2-ls); max-width: 16em; }
.t-close { font-size: var(--ty-close); line-height: var(--ty-close-lh); letter-spacing: var(--ty-close-ls); }
.t-key { font-size: var(--ty-key); line-height: var(--ty-key-lh); letter-spacing: var(--ty-key-ls); }
.t-inv { font-size: var(--ty-inv); line-height: var(--ty-inv-lh); letter-spacing: var(--ty-inv-ls); }
.t-promise { font-size: var(--ty-promise); line-height: var(--ty-promise-lh); letter-spacing: var(--ty-promise-ls); }
.t-lead, .t-body, .t-h3, .t-h3-pin, .t-label, .t-head, .t-stamp, .t-ob, .t-ob-lg, .t-ob-k, .t-num, .t-record {
  font-family: var(--font-text); font-stretch: 100%; word-spacing: normal;
}
.t-lead { font-weight: 400; font-size: var(--ty-lead); line-height: var(--ty-lead-lh); letter-spacing: 0; max-width: 34rem; text-wrap: pretty; }
.t-body { font-weight: 400; font-size: var(--ty-body); line-height: var(--ty-body-lh); letter-spacing: 0; max-width: 36rem; text-wrap: pretty; }
.t-h3 { font-weight: 600; font-size: var(--ty-h3); line-height: var(--ty-h3-lh); letter-spacing: -0.01em; text-wrap: balance; }
.t-h3-pin { font-weight: 600; font-size: var(--ty-h3-pin); line-height: var(--ty-h3-pin-lh); letter-spacing: -0.01em; text-wrap: balance; }
.t-label { font-weight: 600; font-size: var(--ty-label); line-height: var(--ty-label-lh); letter-spacing: 0.08em; text-transform: uppercase; }
.t-head { font-weight: 600; font-size: var(--ty-head); line-height: var(--ty-head-lh); letter-spacing: 0.08em; text-transform: uppercase; }
.t-stamp { font-weight: 600; font-size: var(--ty-stamp); line-height: var(--ty-stamp-lh); letter-spacing: 0.01em; }
.t-ob { font-size: var(--ty-ob); line-height: var(--ty-ob-lh); }
.t-ob-lg { font-size: var(--ty-ob-lg); line-height: var(--ty-ob-lg-lh); }
.t-ob-k { font-weight: 400; font-size: var(--ty-ob-k); line-height: var(--ty-ob-k-lh); color: var(--grey); }
.sx--ink .t-ob-k, .gl--ink .t-ob-k, .gl--smoked .t-ob-k { color: var(--c-soft-ink); }
.t-num, .t-total, .t-fig, .t-fig-xl {
  font-family: var(--font-text); font-stretch: 100%; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.t-total { font-size: var(--ty-total); line-height: var(--ty-total-lh); }
.t-fig { font-size: var(--ty-fig); line-height: var(--ty-fig-lh); }
.t-fig-xl { font-size: var(--ty-fig-xl); line-height: var(--ty-fig-xl-lh); }
.t-record { font-weight: 400; font-size: var(--ty-record); line-height: var(--ty-record-lh); text-wrap: pretty; }
:root { --mo-rise: var(--t-rise); --mo-dur: var(--t-slow); --mo-ease: var(--e-out); }   
@keyframes mo-pop { from { scale: 0.6; opacity: 0; } to { scale: 1; opacity: 1; } }   
.motion .mo-now, .motion .mo-now *, .motion .mo-now::before, .motion .mo-now::after, .motion .mo-now *::before, .motion .mo-now *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tlink::after, .tlink:hover::after { transition: none; translate: none; }
  .brand__name, .brand svg { transition: none !important; }
  .topbar, .btn, .mail { transition: none; }
  .close .btn::after, .close .btn:hover::after { transition: none; translate: none; }
  .pstep__ob .ob, .pstep__ob .ob-stack { transition: none; translate: none; }
}
body:has(> main.home) { min-height: 100svh; display: flex; flex-direction: column; }
body:has(> main.home) > main.home { flex: 1 0 auto; }
.one-foot { position: relative; margin-top: -24px; background: var(--paper); color: var(--grey); border-top: 1px solid var(--hairline); }
.one-foot__in {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px 32px;
  padding-block: 12px max(12px, env(safe-area-inset-bottom));
  font-size: 12px; line-height: 18px;
}
.one-foot p { margin: 0; }
.one-foot__rec { max-width: none; }
.one-foot__nav { display: flex; gap: 20px; flex: none; white-space: nowrap; }
.one-foot a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .one-foot a:hover { text-decoration-thickness: 2px; } }
.one-foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (width < 700px) {
  .one-foot__in { flex-direction: column; gap: 2px; padding-block: 6px max(6px, env(safe-area-inset-bottom)); font-size: 11px; line-height: 14px; }
}
@media (700px <= width < 1024px) { .one-foot { margin-top: -26px; } }